<template>
  <div class="consult-container">
    <div class="consult-tabs">
      <div :class="{ 'consult-tab': true, active: consultActive == vItem.name }" v-for="(vItem, k) in consultList"
        :key="k" @click="onChangeTab('consult', vItem.name)">
        {{ vItem.title }}
      </div>
    </div>
    <!-- 咨客大厅 name:'consult-client' -->
    <div class="table-main" v-show="consultActive === 'consult-client'">
      <div class="table-sidebar">
        <div class="table-sidebar-title">桌台</div>
        <ul class="table-sidebar-list">
          <div class="title_box" v-for="(v, k) in roomArea" :key="k"
            :class="{ 'table-sidebar-item': true, active: zoneActive == k }" @click="onChangeTab('zone', k)">
            <div class="title">{{ v.roomAreaName }}</div>
          </div>
        </ul>
      </div>
      <div class="table-panel"  v-loading="loadingTable">
        <div style="display: flex;justify-content: space-between;">
          <ul class="table-time-tabs">
            <li :class="{ 'table-time-tab': true, active: timeActive == k }" v-for="(v, k) in timeList" :key="k"
              @click="onChangeTab('time', k)">
              {{ v.name }}
            </li>
          </ul>
          <div class="postsearch-view">
            <el-input placeholder="订台人姓名或手机号" v-model="postForm.key" class="search-input-key"></el-input>
            <div class="search-bot-item" @click="postFormSearch">查询</div>
            <div class="search-bot-item search-bot-clear" v-has-role="'cashier-cleanRoom'" @click="handleResetAll">一键清台</div>
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;">
        <ul class="table-type-tabs">
          <template v-for="(v, k) in typeList" :key="k">
            <li :class="{ 'table-type-tab': true, active: typeActive == k }" @click="onChangeTab('type', k)">
              <div :class="['table-type-tag', `${v.class}`]" v-if="k != 0"></div>
              <div class="table-type-name">{{ v.name }}</div>
              <div class="table-type-num">（{{ v.num }}）</div>
            </li>
          </template>
        </ul>
        <div class="filter-continar" ref="buttonRef" v-click-outside="onClickOutside">
            <img src="https://oss.jtmckj.com/pc/images/wine/filter.png" alt="">
            <div class="filter-text">筛选</div>
            <el-popover class="custom-popover" ref="popoverRef" :virtual-ref="buttonRef" trigger="click"
              virtual-triggering>
              <div style="width: 80px;padding-left: 10px;">
                <!-- <el-checkbox v-model="checked1" label="消费金额" size="large" />
                  <el-checkbox v-model="checked2" label="备注" size="large" />  -->
                <el-checkbox v-model="checked3" label="低消" size="large" />
                <el-checkbox v-model="checked4" label="来源" size="large" />
                <el-checkbox v-model="checked5" label="客户" size="large" />
                <el-checkbox v-model="checked6" label="备注" size="large" />
              </div>
            </el-popover>
        </div>
      </div>

        <ul class="table-list">
          <li class="table-item"
            :class="{ 'pre': v.roomStateDesc == '预订中', 'use': v.roomStateDesc == '使用中' || v.roomState == '3', 'res': v.roomStateDesc == '维修中', 'stbgf': v.isLock == true }"
            v-for="(v, k) in tableList" @click="showPopup(v)" :key="k">
            <div class="k-table-flex">
              <div class="table-item-name">{{ v.roomName }}</div>
              <div class="table-item-max">{{ v.maxPeople }}座</div>
            </div>
            <div style="display: flex;" v-if="v.beforeRoomName">
                <div class="rooName-tornost" >{{v.beforeRoomName}}转入</div>
              </div>
            <div class="table-item-type" style=" text-align: center;"
              :class="{ 'pre': v.roomStateDesc == '预订中', 'use': v.roomStateDesc == '使用中', 'res': v.roomStateDesc == '维修中', 'noPay': v.roomStateDesc == '未支付' }">
              {{ v.roomStateDesc }}</div>
            <div class="table-item-padding">
              <div class="table-item-low fontsize" v-if="checked3">低消：{{ v.minConsume }}</div>
              <div class="table-item-low fontsize" v-if="checked4">来源：{{ v.consumeSourceType == '营销' ? filterUserNameMain(v.mainTainUserName) : v.consumeSourceType }}</div>
              <div class="table-item-low fontsize other-user-div" v-if="checked4 && filterUserNameSecond(v.mainTainUserName)">
                <div class="other-user-name" v-if="v.consumeSourceType == '营销'">{{ filterUserNameSecond(v.mainTainUserName) }}</div>
              </div>
              <div class="table-item-low fontsize low-warp" v-if="checked5">客户：{{ v.memberName }}<span v-if="v.memberMobile">({{ v.memberMobile }})</span></div>
              <div class="table-item-low fontsize" v-if="checked6">备注：{{ v.remark }}</div>
            </div>
            <div class="table-item-lock" v-if="v.isLock"></div>
             <!-- 联台和转台同时  转台图标往左移-->
            <div class="table-item-turn" v-if="v.beforeRoomCode" :class="{'look-img-pleft':v.beforeRoomCode &&  v.subRooms}"></div>
            
             <!-- 主桌 -->
             <div class="main-box" v-if="v.subRooms">
              <div class="main-text" v-for="Rooms in v.subRooms" :key="Rooms.Code">联{{ Rooms.Name }}</div>
              <img  class="main-img" src="https://oss.jtmckj.com/pc/images/order/main-icon.png" alt="">
            </div>
            <!-- 副桌 -->
            <div class="sublt-box" v-if="v.mainRoom" :class="{'sublt-ts-class':v.mainRoom && v.beforeRoomCode}">
                <div class="liantai-text">联{{ v.mainRoom.Name }}</div>
            </div>

          </li>
          <li class="table-control">
            <!-- <div class="table-btn" data-type="up" v-show="postForm.pageIndex > 1" @click="changePageSize">上一页</div>
            <div class="table-btn" data-type="down" v-show="tableList.length == postForm.pageSize"
              @click="changePageSize">
              下一页</div> -->
            <div v-if="totalPages > 1">
              <div class="table-btn" style="margin-bottom: 20px;" data-type="up"
                :class="{ 'disabled_color': postForm.pageIndex === 1 }" v-if="postForm.pageIndex === 1">上一页</div>
              <div class="table-btn" style="margin-bottom: 20px;" data-type="up" v-else @click="prevPage">上一页</div>
              <div class="table-btn" :class="{ 'disabled_color': !canNextPage }" v-if="!canNextPage" data-type="down">
                下一页</div>
              <div class="table-btn" v-else data-type="down" @click="nextPage">下一页</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 预订列表 name:'consult-reserve'  -->
    <div class="book-main" v-show="consultActive === 'consult-reserve'">
      <div class="book-top">
        <!-- <div class="book-top-item"> -->
        <el-row>
          <el-col :lg="6" :md="6" :sm="6" :xs="6">
            <div class="upper-item">
              <span class="book-title">预订时间：</span>
              <el-date-picker v-model="reserveShow.reserveTime" type="daterange" range-separator="一"
                start-placeholder="开始时间" end-placeholder="结束时间" @change="reserveTimeChange">
              </el-date-picker>
            </div>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xs="6">
            <div class="upper-item">
              <span class="book-title">订台人：</span>
              <el-select v-model="reserveShow.maintainUser" placeholder="请选择" @change="maintainUserChange"
                :suffix-icon="IconDropDown" filterable>
                <el-option v-for="item in customerManageList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xs="6">
            <div class="upper-item">
              <span class="book-title">手机号/姓名：</span>
              <el-input v-model="reserveShow.key" placeholder="请输入内容" @input="keyChange"></el-input>
            </div>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xs="6">
            <div class="upper-item">
              <span class="book-title">预订状态：</span>
              <el-select v-model="reserveShow.state" placeholder="请选择" @change="stateChange"
                :suffix-icon="IconDropDown">
                <el-option v-for="item in reserveOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xs="6">
            <div class="upper-item">
              <span class="book-title">取消原因：</span>
              <el-select v-model="reserveShow.cancelReason" placeholder="请选择" @change="cancelReasonChange"
                :suffix-icon="IconDropDown">
                <el-option v-for="item in cancleList" :key="item.value" :label="item.label" :value="item.label">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xs="6">
            <div class="upper-item">
              <span class="book-title">桌台号：</span>
              <el-input v-model="reserveShow.roomName" placeholder="请选择桌台号" @click="openTableSelect()"
                readonly></el-input>

            </div>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xs="6">
            <div class="upper-item">
              <span class="book-title">来源：</span>
              <el-select v-model="reserveShow.source" placeholder="请选择" @change="sourceChange"
                :suffix-icon="IconDropDown">
                <el-option v-for="item in fromList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xs="6">
            <div class="upper-item">
              <span class="book-title">备注：</span>
              <el-input v-model="reserveShow.remark" placeholder="请输入备注" @input="remarkChange"></el-input>

            </div>
          </el-col>
        </el-row>
        <!-- </div> -->

      </div>
      <div class="book-more">
        <div class="more-item">
          <span class="book-title">订金状态：</span>
          <el-radio-group v-model="reserveShow.reserveAmtState" @change="reserveAmtStateChange">
            <el-radio value="1">免订金</el-radio>
            <el-radio value="2">付订金</el-radio>
          </el-radio-group>
        </div>
        <div class="more-item">
          <span class="book-title">是否在黑名单：</span>
          <el-radio-group v-model="reserveShow.isBlack" @change="isBlackChange">
            <el-radio value="1">在黑名单</el-radio>
            <el-radio value="0">不在黑名单</el-radio>
          </el-radio-group>
        </div>
        <div class="book-top-botton">
          <div class="botton-item" style="margin-bottom: 10px;" @click="search">查询</div>
          <div class="botton-item" style="background: #E6E6E6;" @click="reset">清空筛选</div>
        </div>
      </div>
      <div class="book-center">
        <div class="book-center-upper">
          <div class="center-upper-left">
            <div class="left-item">预订总数（含取消）：<span class="item-num">{{ reserveStateInfo.totalCount }}</span></div>
            <div class="left-item">取消预订：<span class="item-num">{{ reserveStateInfo.cancelCount }}</span></div>
            <div class="left-item">已开台：<span class="item-num">{{ reserveStateInfo.finishCount }}</span></div>
            <div class="left-item">到店人数：<span class="item-num">{{ reserveStateInfo.arriveCount }}</span></div>
          </div>
          <div class="center-upper-right">
            <div v-has-role="'consult-reserve-reserveCancel'" class="right-button" style="margin-right: 20px;"
              data-type="cancle" @click="confirm">取消预订</div>
            <div v-has-role="'consult-reserve-blackList'" class="right-button" data-type="addBlack" @click="confirm">
              加入黑名单
            </div>
          </div>
        </div>
        <el-table ref="multipleTable" :data="reserveList" tooltip-effect="dark" class="book-table" style="width: 100%"
          header-row-class-name="tableHeaderRowClassName" @selection-change="selectTableItem" :cell-style="cellStyle">
          <el-table-column type="selection" align="center"> </el-table-column>
          <el-table-column type="index" label="序号" :min-width="orderColumnWidth" align="center"> </el-table-column>
          <el-table-column prop="MemberName" label="姓名" :min-width="tableColumnWidth" align="center"> </el-table-column>
          <el-table-column prop="MemberMobile" label="电话" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column label="到店时间" :min-width="tableColumnWidth" align="center">

            <template #default="scope">{{ scope.row.ReserveTime }}</template>
          </el-table-column>
          <el-table-column prop="PeopleNumber" label="人数" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="roomName" label="预订桌号" :min-width="tableColumnWidth" align="center"> </el-table-column>
          <el-table-column label="预留时间" :min-width="tableColumnWidth" align="center">
            <!-- 时间前端自行处理 -->

            <template #default="scope">{{ scope.row.KeepTime ? dayjs(scope.row.KeepTime).format('YYYY-MM-DD HH:mm:ss') :
        '--' }}</template>
          </el-table-column>
          <el-table-column prop="specialRequireTypeName" label="特殊要求" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="stateName" label="预订状态" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="reserveAmtState" label="订金状态" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="reserveAmt" label="订金金额" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="typeName" label="来源" :min-width="tableColumnWidth" align="center"> </el-table-column>
          <el-table-column prop="maintainUserName" label="订台人" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="sendMsmTimes" label="通知（次）" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="cancelReason" label="取消原因" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" :min-width="tableColumnWidth" align="center"> </el-table-column>
        </el-table>
      </div>
      <div class="book-footer">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          v-model:currentPage="currentPage" :page-size="reserveListForm.pageSize"
          layout="total, prev, pager, next,sizes, jumper" :total="reserveStateInfo.totalCount">
        </el-pagination>
        <button class="footer-button">确定</button>
      </div>
    </div>
    <!-- 加载预订信息 -->
     <div class="book-main tody-book-main" v-show="consultActive === 'consult-book'">
      <div class="book-center" style="margin-top: 20px;">
        <el-table ref="multipleTable" :data="TodayReserveList" tooltip-effect="dark" class="book-table" style="width: 100%"
          header-row-class-name="tableHeaderRowClassName" @selection-change="selectTableItem" :cell-style="cellStyle">
          <!-- <el-table-column type="selection" align="center"> </el-table-column> -->
          <el-table-column type="index" label="序号" :min-width="orderColumnWidth" align="center"> </el-table-column>
          <el-table-column prop="roomCode" label="房台编号" min-width="120px" align="center"> </el-table-column>
          <el-table-column prop="roomName" label="房台名称" min-width="120px"  align="center"></el-table-column>
          <el-table-column prop="reserveCode" label="预订编号" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="roomReserveCode" label="房台预订编号" :min-width="tableColumnWidth" align="center"> </el-table-column>
          <el-table-column prop="waiterUser" label="服务员" min-width="120px"  align="center">
          </el-table-column>
          <el-table-column prop="roomWaiterUser" label="房台服务员" min-width="140px"  align="center">
          </el-table-column>
          <el-table-column prop="maintainUser" label="营销人员" min-width="140px" align="center">
          </el-table-column>
          <el-table-column prop="roomMaintainUser" label="房台营销人员" min-width="140px" align="center">
          </el-table-column>
          <el-table-column prop="memberCode" label="会员编号" :min-width="tableColumnWidth" align="center"> </el-table-column>
          <el-table-column prop="roomMemberCode" label="房台会员编号" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="memberMobile" label="会员电话" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="roomMemberMobile" label="房台会员电话" :min-width="tableColumnWidth" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="操作"  min-width="110px" fixed="right" align="center">
            <template #default="scope">
              <div class="button-container" style="display: flex; justify-content: center; align-items: center;">
                   <el-button v-if="scope.row.state" class="action-btn" @click="handleTurntable(scope.row)">转台</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div> 
     </div>
  </div>
  <!-- 房台操作弹窗 -->
  <el-dialog top="80px" v-model="popupShow" :close-on-click-modal="false" :show-close="false" class="dailog"
    width="52%">
    <div class="popup">
      <div class="popup-top">
        <div class="popup-top-item" v-for="(v, k) in tabBtnList" :key="k" @click="onChangeTabbtn(k, v)"
          :class="{ active: popupActive == k, none: v.value == '', disabled: v.isCanUse == '0' }">
          {{ v.value }}
        </div>
      </div>
      <div class="popup-title">
        <div class="popup-title-item">桌号：{{ roomName }}</div>
        <el-switch v-model="lockShow" inactive-text="锁台" @change="lockRoom" v-if="roomState == 0"></el-switch>
      </div>
      <div class="popup-main" v-if="lockShow != '1'">
        <!-- <el-form ref="form" :model="form" > -->
        <div class="form" v-show="popupTitle == '取消预订' || popupTitle == '开台' || popupTitle == '预订'">
          <div class="form-item">
            <el-form-item label="手机号码：" class="form-item-child" :required="popupTitle == '预订'">
              <el-input v-model="form.memberMobile" type="number" @blur="searchInfo"></el-input>
            </el-form-item>
            <el-form-item label="客户姓名：" :required="popupTitle == '预订'">
              <el-input v-model="form.memberName"></el-input>
            </el-form-item>
          </div>
          <div class="form-item">
            <el-form-item label="就餐人数:" required>
              <el-input v-model="form.arrivedPeoperCount" type="number">

                <template #suffix>
                  <span class="input-span">人&nbsp;</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="性别：" :required="popupTitle == '预订'">
              <el-radio-group v-model="form.sex">
                <el-radio value="011001">男</el-radio>
                <el-radio value="011002">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="form-item spe">
            <div class="form-item-time">{{ currentTime }}</div>
            <div class="timePicke">
              <el-form-item label="到店时间：" :required="popupTitle == '预订'">
                <el-time-picker placeholder="选择日期" v-model="showTime" style="width: 100%;" :suffix-icon="IconClock"
                  @change="timeSelect"></el-time-picker>
              </el-form-item>
            </div>

            <el-form-item label="低消：">
              <el-input v-model="form.minConsume">

                <template #suffix>
                  <span class="input-span">元&nbsp;</span>
                </template>
              </el-input>
            </el-form-item>
          </div>
          <div class="form-item">
            <el-form-item label="来源：">
              <el-select v-model="form.sourceType" placeholder="请选择来源" :suffix-icon="IconDropDown"
                @change="formSourceChange">
                <el-option :label="v.label" :value="v.value" v-for="(v, k) in fromList" :key="k"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订台人：">
              <el-tree-select :disabled="form.sourceType != '104004'" v-model="selectedValueText" :data="treeData"
                :props="{
        label: 'label',
        value: 'value',
        children: 'children',
      }" clearable placeholder="请选择订台人" :suffix-icon="IconDropDown" @change="handleSelectionChange" filterable />
            </el-form-item>
          </div>
          <div class="form-item">
            <el-form-item label="服务员：">
              <el-select v-model="form.waiterUser" filterable placeholder="请选择" :suffix-icon="IconDropDown">
                <el-option :label="v.label" :value="v.value" v-for="(v, k) in waiterList" :key="k"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="特殊要求：">
              <el-select v-model="form.specialRequireType" placeholder="请选择" :suffix-icon="IconDropDown">
                <el-option :label="v.label" :value="v.value" v-for="(v, k) in speAskList" :key="k"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="form-speItem">
            <el-form-item label="备注：">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
          </div>
          <div class="form-speItem">
            <el-radio v-model="form.isSendMsm" label="1" @click.prevent="radioChange"
              v-show="popupTitle == '取消预订' || popupTitle == '预订'">短信通知</el-radio>
            <!-- <el-radio v-model="form.isSendMsm" label="0">&nbsp;</el-radio> -->
          </div>
          <div class="form-footer">
            <el-form-item label="取消原因：" v-show="popupTitle == '取消预订'">
              <el-select v-model="form.cancelReason" placeholder="请选择取消原因">
                <el-option :label="v.label" :value="v.label" v-for="(v, k) in cancleList" :key="k"></el-option>
              </el-select>
            </el-form-item>
            <div v-show="popupTitle != '取消预订'"></div>
            <div class="form-footer-btn">
              <div class="btn-cancle" @click="closeDig">取消</div>
              <div class="btn-submit" @click="onSubmit">确认</div>
            </div>
          </div>
          <!-- </el-form> -->
        </div>
        <div class="turnTable" v-show="popupTitle == '转台'">
          <div class="turnTable-item">
            <div>目标桌台：</div>
            <el-input v-model="selectedTabName" style="margin: 0 20px 0 10px;"></el-input>
            <div class="turnTable-item-btn" @click="onShowTable">选择</div>
          </div>
          <div class="popup-btn">
            <div class="btn-cancle" @click="popupShow = false">取消</div>
            <div class="btn-submit" @click="confirmTurnTable">确认</div>
          </div>
        </div>
        <div class="records" v-show="popupTitle == '操作记录'">
          <div class="records-top">
            <div :class="{ 'records-top-tab': true, active: recordsTimeActive == k }" v-for="(v, k) in recordsTimeList"
              :key="k" @click="onChangeTab('popup-time', k)">
              {{ v.name }}
            </div>
            <div @click="recordsTimeActive = 4" :class="{ 'data-tab': true, active: recordsTimeActive == 4 }">
              <el-date-picker v-model="recordsCurrentTime" type="datetimerange" range-separator="自定义" size="mini"
                style="width: 50px;" @change="recordTimeSelect">
              </el-date-picker>
            </div>
          </div>
          <div class="records-time">
            <span>{{ recordForm.stratDate }} &nbsp;</span><span>&nbsp;到&nbsp;</span><span>&nbsp;{{ recordForm.endDate
              }}</span>
          </div>
          <div class="records-main">
            <el-table ref="multipleTable" :data="recordsTabDate" tooltip-effect="dark" class="book-table"
              style="width: 100%;--el-table-border:1px solid #e5e5e5 " header-row-class-name="tableHeaderRowClassName">
              <!-- <el-table-column label="序号" type="index" width="50" align="center"> </el-table-column> -->
              <el-table-column prop="consumeCode" label="台单号" min-width="50" align="center"> </el-table-column>
              <el-table-column label="操作时间" min-width="50" align="center">

                <template #default="scope">{{ scope.row.crDate }}</template>
              </el-table-column>
              <!-- <el-table-column prop="beforeRoomName" label="原桌台" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="afterRoomName" label="目标桌台" min-width="60" align="center"> </el-table-column>
              <el-table-column prop="stateName" label="操作" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="consumeCode" label="订单编号" min-width="60" align="center"> </el-table-column> -->
              <el-table-column prop="waiterUserName" label="操作人" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="roomName" label="桌台" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="stateName" label="操作类型" min-width="30" align="center"> </el-table-column>
              <el-table-column prop="remark" label="操作详情" min-width="50" align="center"> </el-table-column>
            </el-table>
          </div>
          <div class="popup-btn" style="justify-content: flex-end;padding-top: 20px;margin-bottom: 20px;"
            @click="changeRecordsPage">
            <div class="btn-cancle spe" style="margin-right: 0;" data-type="up" v-show="recordForm.pageIndex > 1">上一页</div>
            <div class="btn-submit spe ke_ml20" data-type="down" v-show="recordsTabDate.length >= recordForm.pageSize">下一页</div>
          </div>
          <div class="popup-btn" style="justify-content: flex-end;">
            <div class="btn-cancle" @click="popupShow = false">取消</div>
            <div class="btn-submit" @click="popupShow = false">确认</div>
          </div>
        </div>
        <div class="service" v-show="popupTitle == '维修/正常'">
          <div class="service-title">调整后桌台状态</div>
          <el-radio-group v-model="roomRepairForm.state" class="service-radios">
            <el-radio label="0" :disabled="roomRepairForm.state == 1">维修</el-radio>
            <el-radio label="1" style="margin-left: 60px;" :disabled="roomRepairForm.state == 0">正常</el-radio>
          </el-radio-group>
          <div class="popup-btn">
            <div class="btn-cancle" @click="popupShow = false">取消</div>
            <div class="btn-submit" @click="confirmShow = true">确认</div>
          </div>
        </div>
        <div class="clear" v-show="popupTitle == '清台'">
          <div class="clear-title">确认要清台吗？</div>
          <div class="popup-btn">
            <div class="btn-cancle" @click="popupShow = false">取消</div>
            <div class="btn-submit" @click="roomClear()">确认</div>
          </div>
        </div>
      </div>
      <div class="lockShow-btn" v-else>
        <div class="lockShow-cancle" @click="popupShow = false">取消</div>
        <div class="lockShow-submit" @click="popupShow = false">确认</div>
      </div>

    </div>
  </el-dialog>
  <!-- 选择桌台弹窗 -->
  <el-dialog top="80px" v-model="allTableSelectShow" :show-close="false" width="60%">
    <div class="tableSelect">
      <div class="tableSelect-title">选择桌台</div>
      <div style="padding: 0 4px;">
        <div class="tableSelect-tab">
          <div class="tab-item" :class="{ active: tableSelectActive == k }" v-for="(v, k) in roomArea" :key="k"
            @click="onChangeTab('allTableSelect', k)">
            <div>{{ v.roomAreaName }}</div>
            <div class="tab-item-bottom" :class="{ active: tableSelectActive == k }"></div>
          </div>
        </div>
      </div>

      <div class="tableSelect-main" @click="onSelectTable">
        <div class="tableSelect-main-item" :data-id="k" :data-name="v.roomName" :data-code="v.roomCode"
          :class="{ active: tabSelActive == k }" v-for="(v, k) in tableList" :key="k">{{ v.roomName }}</div>
        <div class="tableSelect-main-item spe" data-type="up" :class="{ canNotUse: postForm.pageIndex == 1 }"
          @click="onAllChangePage">上页</div>
        <div class="tableSelect-main-item spe" data-type="down"
          :class="{ canNotUse: tableList.length < postForm.pageSize }" @click="onAllChangePage">下页</div>
      </div>
      <div class="popup-btn" style="padding: 0 4px;">
        <div class="btn-cancle" @click="allTableSelectShow = false">取消</div>
        <div class="btn-submit" @click="allTableconfirm">确认</div>
      </div>
    </div>
  </el-dialog>
  <!-- 选择空闲桌台弹窗 -->
  <el-dialog top="80px" v-model="tableSelectShow" :show-close="false" width="60%">
    <div class="tableSelect">
      <div class="tableSelect-title">选择桌台</div>
      <div style="padding: 0 4px;">
        <div class="tableSelect-tab">
          <div class="tab-item" :class="{ active: tableSelectActive == k }" v-for="(v, k) in roomArea" :key="k"
            @click="onChangeTab('tableSelect', k)">
            <div>{{ v.roomAreaName }}</div>
            <div class="tab-item-bottom" :class="{ active: tableSelectActive == k }"></div>
          </div>
        </div>
      </div>

      <div class="tableSelect-main" @click="onSelectTable">
        <div class="tableSelect-main-item" :data-id="k" :data-name="v.roomName" :data-code="v.roomCode"
          :class="{ active: tabSelActive == k }" v-for="(v, k) in freeTableList" :key="k">{{ v.roomName }}</div>
        <div class="tableSelect-main-item spe" data-type="up" :class="{ canNotUse: usePostForm.pageIndex == 1 }"
          @click="onChangePage">上页</div>
        <div class="tableSelect-main-item spe" data-type="down"
          :class="{ canNotUse: freeTableList.length < usePostForm.pageSize }" @click="onChangePage">下页</div>
      </div>
      <div class="popup-btn" style="padding: 0 4px;">
        <div class="btn-cancle" @click="tableSelectShow = false">取消</div>
        <div class="btn-submit" @click="confirmSelect">确认</div>
      </div>
    </div>
  </el-dialog>
  <!-- 维修确认弹窗 -->
  <el-dialog top="80px" v-model="confirmShow" :show-close="false" width="60%">
    <div class="confirmPopue">
      <div class="confirmPopue-title">维修/取消维修</div>
      <div class="confirmPopue-center" v-if="roomRepairForm.state == '1'">确定要取消维修{{ roomName }}桌台吗？</div>
      <div class="confirmPopue-center" v-else>确定要维修{{ roomName }}桌台吗？</div>
      <div class="popup-btn">
        <div class="btn-cancle" @click="confirmShow = false">取消</div>
        <div class="btn-submit" @click="roomRepair()">确认</div>
      </div>
    </div>
  </el-dialog>
  <!-- 预订列表取消预订、加入黑名单确认弹窗 -->
  <el-dialog top="80px" v-model="confirmDialogShow" :show-close="false" width="60%">
    <div class="confirmPopue">
      <div class="confirmPopue-title">{{ confirmTitle }}</div>
      <div class="confirmPopue-center" v-if="confirmTitle == '取消预订'">
        <div class="top-item">
          <span class="top-item-title">取消原因：</span>
          <el-select v-model="cancleReason" placeholder="请选择" @change="chanegCancleReason">
            <el-option v-for="item in cancleList" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </div>
        <div class="top-item">
          <span class="top-item-title">备注：</span>
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea" @input="textareaChange"></el-input>
        </div>
        <div class="top-item" style="padding-left: 135px;">
          <el-radio v-model="canclePreForm.isSendMsm" label="1" @click.prevent="radioChange2">短信通知</el-radio>
          <!-- <el-radio v-model="canclePreForm.isSendMsm" value="1">短信通知</el-radio>
          <el-radio v-model="canclePreForm.isSendMsm" value="0">&nbsp;</el-radio> -->
        </div>
      </div>
      <div class="confirmPopue-center" v-else style="padding:30px 0 40px;">是否确认将选中手机号加入预订黑名单？</div>
      <div class="popup-btn">
        <div class="btn-cancle" @click="confirmDialogShow = false">取消</div>
        <div class="btn-submit" @click="cancleOrBlack()">确认</div>
      </div>
    </div>
  </el-dialog>
  <ResetAllDialog ref="ResetAllRef"  :visible="ResetAllVisible" :multipleSelection="CleartableList" @emitCancel="emitResetAllCancel" @Openemit="Openemit" @closeDialog="closeDialog" @closeLoading="closeLoading" @emitSubmit="emitResetAllSubmit" />
  <ZDialog v-model="ztconfirmShow" width="60%" title="提示" :roomName="ztroomName"  :currentRooName="selectedTabName" content="是否确认转台?" @cancel="ztconfirmShow = false" @confirm="confirmztTable()"></ZDialog>
</template>

<script setup>
import Api from '@/api'
import dayjs from "dayjs"
import ls from '@/lib/ls'
import IconDropDown from '@/components/Icon/IconDropDown.vue';
import IconDropDownDis from '@/components/Icon/IconDropDownDis.vue';
import IconClock from '@/components/Icon/IconClock.vue';
import { transformArrayProps, validateMobile } from '@/lib/util.js'
import { ElNotification } from 'element-plus'
import useConfigStore from '@/store/config'
import { getLocalIPv4 } from "@/utils/getip.js";
import { transformWorkTime } from '@/utils/chenhao.js'
import ResetAllDialog from '@/views/workbench/cashier/dialog/resetAllDialog.vue'
import ZDialog from '@/components/Dialog/Dialog3.vue'

const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime 

const router = useRouter()
const format = date => date.format('YYYY-MM-DD HH:mm:ss')

const tableColumnWidth = ref('200')
const orderColumnWidth = ref('90')
console.log(window.innerWidth, 'window.innerWidth----------------');
window.addEventListener("resize", readerSize)
function readerSize() {
  console.log(window.innerWidth, 'window.innerWidth2222222');
  if (window.innerWidth >= 1200) {
    tableColumnWidth.value = '160'
  } else if (window.innerWidth >= 800 && window.innerWidth < 1200) {
    tableColumnWidth.value = '120'
  } else if (window.innerWidth >= 400 && window.innerWidth < 800) {
    tableColumnWidth.value = '40'
  }
}

const formatFun = (timeT) => {
  let result = ''
  if (timeT) {
    result = dayjs(timeT).format('YYYY-MM-DD HH:mm:ss')
  }
  return result
}

const onChangeTab = (type, k, v) => {
  switch (type) {
    case 'consult':
      consultActive.value = k
      postForm.value.areaCode = ''
      if(k == 'consult-book') {
        GetTodayReserve()
      } else {
        getTableInfo(true)
      }
      break
    case 'zone':
      zoneActive.value = k
      console.log(zoneActive.value,'zoneActive.value')
      console.log(roomArea.value[k]);
      postForm.value.areaCode = roomArea.value[k].roomAreaCode
      getTableInfo(true)
      CopygetTableInfo()
      break
    case 'time':
      timeActive.value = k
      postForm.value.reserveTime = timeList.value[k].value
      currentTime.value = timeList.value[k].value
      configStore.curTableDate = currentTime.value
      getTableInfo(true)
      break
    case 'type':
      typeActive.value = k
      console.log(typeList.value[k].state);
      postForm.value.roomState = typeList.value[k].state
      getTableInfo(true)
      CopygetTableInfo()
      break
    // 选中桌台 - 操作记录 - 时间类型的选择
    case 'popup-time':
      recordsTimeActive.value = k
      console.log('recordsTimeList', recordsTimeList.value[k]);
      recordForm.value.stratDate = recordsTimeList.value[k].startTime
      recordForm.value.endDate = recordsTimeList.value[k].endTime // format(dayjs())
      getRoomOpeHistory()
      break
    case 'tableSelect':
      tableSelectActive.value = k
      usePostForm.value.areaCode = roomArea.value[k].roomAreaCode
      getCanUseTables(true)
      break
    case 'allTableSelect':
      tableSelectActive.value = k
      postForm.value.areaCode = roomArea.value[k].roomAreaCode
      getTableInfo(true)
      break
  }

}
// ------------------------------------------------------------- 桌台操作 ----------------------------------------



const onChangeTabbtn = (k, v) => {
  console.log(k, v);
  console.log(roomState.value);

  if (v.isCanUse == '0') {
    return
  }
  popupTitle.value = v.value
  console.log(popupTitle.value);
  popupActive.value = k
  if (popupTitle.value == '操作记录') {
    // 获取操作记录
    getRoomOpeHistory()
  }
  if (popupTitle.value == '开台') {
    const currentDate = currentTime.value;
    const fixedTime = timeNow.value;
    const dateTimeString = `${currentDate} ${fixedTime}`;
    showTime.value = dateTimeString
  }
  if (popupTitle.value == '预订') {
    // 是否发送短信
    form.value.isSendMsm = '0'
    // 时间
    if (roomState.value != '1') { // 房台不是预订状态
      const currentDate = currentTime.value;
      const dateTimeString = `${currentDate} ${configStore.shopInfo.reserveArrivalTime}`;
      showTime.value = dateTimeString
    } else {
      showTime.value = toolReTime.value
    }

  } else {
    form.value.isSendMsm = '0'
  }
  if (popupTitle.value == '复台记录') {
    router.push({ path: 'order/clearRecords' })
    ls.set('TABLE_INFO', { roomName: roomName.value, roomCode: recordForm.value.roomCode })
  }

}
// --------------------------------------------------------------- 头部配置 ---------------------------------------------------------------------
const consultActive = ref(0)

const zoneActive = ref(0)
const zoneList = ref([]) // 桌台类型
const roomArea = ref([]) // 房台分区
const timeActive = ref(0) // 头部日期
const currentTime = ref(dayjs().format('YYYY-MM-DD')) // 当前时间
configStore.curTableDate = currentTime.value
const timeList = ref([
  {
    name: '今日',
    value: dayjs().format('YYYY-MM-DD'),
  },
  {
    name: '明日',
    value: dayjs().add(1, 'day').format('YYYY-MM-DD'),
  },
  {
    name: dayjs().add(2, 'day').format('MM-DD'),
    value: dayjs().add(2, 'day').format('YYYY-MM-DD'),
  },
  {
    name: dayjs().add(3, 'day').format('MM-DD'),
    value: dayjs().add(3, 'day').format('YYYY-MM-DD'),
  },
  {
    name: dayjs().add(4, 'day').format('MM-DD'),
    value: dayjs().add(4, 'day').format('YYYY-MM-DD'),
  },
  {
    name: dayjs().add(5, 'day').format('MM-DD'),
    value: dayjs().add(5, 'day').format('YYYY-MM-DD'),
  },
  {
    name: dayjs().add(6, 'day').format('MM-DD'),
    value: dayjs().add(6, 'day').format('YYYY-MM-DD'),
  }
])

const typeActive = ref(0)

const typeList = ref([])
typeList.value = configStore.typeList
const tableList = ref([]) // 桌台信息


const postFormSearch = () => {
  console.log('postForm.value:', postForm.value);
  getTableInfo(true)
}

// --------------------------------------------------------------------- 预订列表 -------------------------------------------------------------------
// 预订列表时间变化
const showReserveTime = ref('')
const formatYMD = date => date.format('YYYY-MM-DD')
// 时间规则：无营业日说法，直接按照自然日查询与统计 
const reserveTimeChange = (e) => {
  if (e) {
    reserveListForm.value.currentDate_Start = formatYMD(dayjs(e[0])) // 预订列表时间修改
    reserveListForm.value.currentDate_End = formatYMD(dayjs(e[1]))
    getReserveStateForm.value.currentDate_Start = formatYMD(dayjs(e[0])) // 预订统计时间修改
    getReserveStateForm.value.currentDate_End = formatYMD(dayjs(e[1]))
    // 补充移除时间后，查询时时间问题
  } else {
    reserveListForm.value.currentDate_Start = ''
    reserveListForm.value.currentDate_End = ''
    getReserveStateForm.value.currentDate_Start = ''
    getReserveStateForm.value.currentDate_End = ''
  }
}
// 订台人变化
const maintainUserChange = (e) => {
  reserveListForm.value.maintainUser = e
}
// 手机号/姓名变化
const keyChange = (e) => {
  reserveListForm.value.key = e
}
// 备注变化
const remarkChange = (e) => {
  reserveListForm.value.remark = e
}
// 订金状态变化
const reserveAmtStateChange = (e) => {
  console.log(e);
  reserveListForm.value.reserveAmtState = e
}
// 是否黑名单变化
const isBlackChange = (e) => {
  console.log(e);
  reserveListForm.value.isBlack = e
}
// 预订状态变化
const stateChange = (e) => {
  reserveListForm.value.state = e

}
// 预订来源变化
const sourceChange = (e) => {
  reserveListForm.value.source = e
}
// 取消原因变化
const cancelReasonChange = (e) => {
  console.log(e);
  reserveListForm.value.cancelReason = e
}
const allTableSelectShow = ref(false)
// 预订桌台号变化
const openTableSelect = () => {
  allTableSelectShow.value = true
  postForm.value.reserveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  postForm.value.areaCode = ''
  getTableInfo()
}
// 预订桌台号确认选中
const allTableconfirm = () => {
  allTableSelectShow.value = false
  console.log(tableList.value[tabSelActive.value].roomCode, tableList.value[tabSelActive.value].roomName);
  reserveShow.value.roomName = tableList.value[tabSelActive.value].roomName
  reserveListForm.value.roomCode = tableList.value[tabSelActive.value].roomCode
}


// --------------------------------------------------- 预订列表操作 ----------------------------------------------------------------
const reserveOptions = [
  {
    label: '已取消',
    value: '0'
  },
  {
    label: '已预订',
    value: '1'
  },
  {
    label: '已开台',
    value: '2'
  },
  {
    label: '无',
    value: ''
  }
]
// table表格选中
const selectTableItem = (e) => {
  canclePreForm.value.reserveCode = e.map(item => item.reserveCode).join(',');
  blackMobiles.value = e.map(item => item.MemberMobile).join(', ');
}
const confirmDialogShow = ref(false)
const confirmTitle = ref('')
const textarea = ref('')
const cancleReason = ref('')
// 取消预订 加入黑名单 弹窗
const confirm = (e) => {
  confirmDialogShow.value = true
  if (e.target.dataset.type == 'cancle') {
    confirmTitle.value = '取消预订'
  } else {
    confirmTitle.value = '加入黑名单'
  }
}
// 取消原因选择
const chanegCancleReason = (e) => {
  canclePreForm.value.cancelReason = e
}
// 备注
const textareaChange = (e) => {
  canclePreForm.value.remark = e
  console.log(canclePreForm.value);
}
// 弹窗确认
const cancleOrBlack = () => {
  if (confirmTitle.value == '取消预订') {
    reserveCancel()
  } else {
    setMemberBlack()
  }
  confirmDialogShow.value = false
}
//  const dayStart = `${dayjs().subtract(1, 'day').format('YYYY-MM-DD')} ${configStore.shopInfo.orgReportStartTime}`; // 营业开始时间
//  const dayEnd = `${dayjs().format('YYYY-MM-DD')} ${configStore.shopInfo.orgReportEndTime}`; // 营业结束时间
// 昨天营业时间
// 查询条件显示用对象
const reserveShow = ref({
  reserveTime: [dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().startOf('day').format('YYYY-MM-DD')],
  maintainUser: '',
  key: '',
  state: '',
  source: '',
  roomName: '',
  reserveAmtState: '1', // 订金状态
  cancelReason: '', // 取消原因
  remark: '', // 备注
  isBlack: '0' // 是否黑名单 0否 1是
})
// 查询
const search = () => {
  console.log(reserveListForm.value);
  // return
  getReserveList(true) // 获取预订列表
  GetReserveStateCount() // 获取统计
}
// 重置
const reset = () => {
  reserveShow.value = {
    reserveTime: [dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().startOf('day').format('YYYY-MM-DD')],
    maintainUser: '',
    key: '',
    state: '',
    source: '',
    roomName: '',
    reserveAmtState: '1',
    cancelReason: '',
    remark: '',
    isBlack: '0'
  }
  reserveListForm.value = {
    currentDate_Start: dayjs().startOf('day').format('YYYY-MM-DD'), // 开始时间
    currentDate_End: dayjs().startOf('day').format('YYYY-MM-DD'), // 结束时间
    maintainUser: '', // 订台人编号
    state: '', //  0取消 1预订 2开台
    roomCode: '', // 房台号
    key: '', // 姓名/手机号
    source: '', // 来源
    pageSize: '10',
    pageIndex: '1',
    reserveAmtState: '1', // 订金状态
    cancelReason: '', // 原因
    remark: '', // 备注
    isBlack: '0' // 是否黑名单
  }
  console.log(reserveShow.value, reserveListForm.value);
  //  getReserveStateForm.value = {
  //     currentDate_Start:format(dayjs().startOf('day')), // 开始时间
  //     currentDate_End:format(dayjs()) // 结束时间
  //   }
}
// --------------------------------------------------- 预订列表分页 ---------------------------------------------------------------
const currentPage = ref()
const handleSizeChange = (val) => {
  reserveListForm.value.pageSize = val
  getReserveList(true) // 获取预订列表
  GetReserveStateCount() // 获取统计
}
const handleCurrentChange = (val) => {
  reserveListForm.value.pageIndex = val
  getReserveList() // 获取预订列表
  GetReserveStateCount() // 获取统计
}

const input = ref('') // 手机号/姓名

const fromValue = ref('')

// -------------------------------------------------------- 预订列表表格 ------------------------------------------------------------
const reserveList = ref([])
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  // console.log(row.stateName);
  if (row.stateName == '已取消') {
    // return 'mycell';
  }
  return {}; // 如果没有样式变化，返回空对象
}
// --------------------------------------------------- 咨客大厅分页 ---------------------------------------------------------------
const changePageSize = (e) => {
  console.log(e.target.dataset.type);
  if (e.target.dataset.type == 'up') {
    if (postForm.value.pageIndex == 1) {
      return
    }
    postForm.value.pageIndex--
  } else {
    if (!tableList.value[0]) {
      console.log('没有下一页了');
      return
    }
    postForm.value.pageIndex++
  }
  getTableInfo()
}


// ----------------------------------------------------- 桌台弹窗 ---------------------------------------------------------------
const popupShow = ref(false)
const popupTitle = ref('开台') // 弹窗标题
const confirmShow = ref(false) // 防误触弹窗
const roomState = ref(0)
const toolReTime = ref('') // 预订时间（过渡用工具）
const showPopup = (v) => {
  let orgCode = ls.get('USER_INFO')?.orgCode
  // 弹窗打开要先清空
  form.value.memberName = ''
  form.value.memberMobile = ''
  // form.value.waiterUser = ''
  form.value.maintainUser = ''
  form.value.arrivedPeoperCount = '1'
  form.value.specialRequire = ''
  form.value.cancelReason = ''
  form.value.sourceType = '104004'
  if(orgCode == '0030'){
    form.value.sourceType = '104001'
  } else if (orgCode == '0021' || orgCode == '0024' || orgCode == '0025') {
    form.value.sourceType = '104004'
  }
  form.value.remark = ''
  form.value.reserveCode = ''
  console.log(v,'查看0000');
  roomState.value = v.roomState
  console.log(v.roomStateDesc, v.roomState);
  // 弹窗打开后的操作
  popupShow.value = true // 打开弹窗
  selectedValueText.value = v.mainTainUserName
  form.value.maintainUser = v.mainTainUserCode

  lockShow.value = v.isLock
  lockForm.value.roomList = v.roomCode // 锁定房台code
  roomName.value = v.roomName // 房台名字
  form.value.roomCode = v.roomCode // 房台code
  form.value.minConsume = v.minConsume // 低消
  turnTableForm.value.consumeCode = v.consumeCode // 转台
  turnTableForm.value.oldRoomCode = v.roomCode // 转台
  turnTableForm.value.reserveCode = v.reserveCode // 预订转台预订号
  recordForm.value.roomCode = v.roomCode
  roomRepairForm.value.roomList = v.roomCode
  clearRoomCode.value = v.roomCode // 清台
  roomRepairForm.value.state = '0' // 调整默认选中维修
  selectedTabName.value = '' // 转台选择桌台置空
  // 拼接时间
  const currentDate = currentTime.value;

  const fixedTime = timeNow.value;
  const dateTimeString = `${currentDate} ${fixedTime}`;
  showTime.value = dateTimeString
  console.log(showTime.value);
  // 如果是预订状态 传预订编码
  if (v.roomState == '1') {
    form.value.reserveCode = v.reserveCode
    // let today = dayjs();
    // // 设置特定的时间（20:30:00）
    // today = today.set('hour', 20).set('minute', 30).set('second', 0);
    // showTime.value = today
  }
  switch (v.roomState) {
    case '0': // 空闲
      popupActive.value = 0
      popupTitle.value = '开台'
      tabBtnList.value = ([
        {
          value: '开台',
          isCanUse: '1',
          role: 'consult-client-open'

        },
        {
          value: '预订',
          isCanUse: '1',
          role: 'consult-client-reserve'
        },
        {
          value: '取消预订',
          isCanUse: '0',
          role: 'consult-client-reserveCancel'
        },
        {
          value: '复台记录',  // 复台 复台记录
          isCanUse: '1',
          role: 'consult-client-reset'
        },
        {
          value: '转台',
          isCanUse: '0',
          role: 'consult-client-transfer'
        },
        {
          value: '操作记录',
          isCanUse: '1',
          role: 'consult-client-operLog'
        },
        {
          value: '维修/正常',
          isCanUse: '1',
          role: 'consult-client-repair'
        }, {
          value: '清台',
          isCanUse: '0',
          role: 'consult-client-clear'
        },
      ])
      break;

    case '1': // 预订状态
      popupActive.value = 0
      popupTitle.value = '开台'
      tabBtnList.value = ([
        {
          value: '开台',
          isCanUse: '1',
          role: 'consult-client-open'

        },
        {
          value: '预订',
          isCanUse: '1',
          role: 'consult-client-reserve'
        },
        {
          value: '取消预订',
          isCanUse: '1',
          role: 'consult-client-reserveCancel'
        },
        {
          value: '复台记录',
          isCanUse: '0',
          role: 'consult-client-reset' // 复台记录 复台
        },
        {
          value: '转台',
          isCanUse: '1',
          role: 'consult-client-transfer'
        },
        {
          value: '操作记录',
          isCanUse: '1',
          role: 'consult-client-operLog'
        },
        {
          value: '维修/正常',
          isCanUse: '0',
          role: 'consult-client-repair'
        }, {
          value: '清台',
          isCanUse: '0',
          role: 'consult-client-clear'
        },
      ])
      console.log(v);
      Api.Common.PcObjProcess.Do({ "functionName": "getReserveInfo", "contentData": v.reserveCode })
        .then(res => {
          console.log(res.result[0]);
          form.value.memberName = res.result[0].memberName
          form.value.memberMobile = res.result[0].memberMobile
          form.value.waiterUser = res.result[0].waiterUserCode
          form.value.maintainUser = res.result[0].maintainUserCode
          form.value.maintainUser_old = res.result[0].maintainUserCode
          form.value.arrivedPeoperCount = res.result[0].peopleNumber
          form.value.specialRequireType = res.result[0].specialRequireTypeCode
          form.value.sourceType = res.result[0].sourceTypeCode
          form.value.remark = res.result[0].remark
          form.value.reserveCode = res.result[0].reserveCode // 空字符串是新增,否则为修改
          form.value.minConsume = res.result[0].minConsume

          if (res.result[0].reserveTime) {
            // showTime.value = dayjs(res.result[0].reserveTime).format('YYYY-MM-DD HH:mm:ss')
            toolReTime.value = dayjs(res.result[0].reserveTime).format('YYYY-MM-DD HH:mm:ss')
            form.value.reserveTime = dayjs(res.result[0].reserveTime).format('YYYY-MM-DD HH:mm:ss')
          }

        })
      break;
    case '2': // 使用
      popupActive.value = 4
      popupTitle.value = '转台'
      tabBtnList.value = ([
        {
          value: '开台',
          isCanUse: '0',
          role: 'consult-client-open'

        },
        {
          value: '预订',
          isCanUse: '0',
          role: 'consult-client-reserve'
        },
        {
          value: '取消预订',
          isCanUse: '0',
          role: 'consult-client-reserveCancel'
        },
        {
          value: '复台记录',
          isCanUse: '0',
          role: 'consult-client-reset'
        },
        {
          value: '转台',
          isCanUse: '1',
          role: 'consult-client-transfer'
        },
        {
          value: '操作记录',
          isCanUse: '1',
          role: 'consult-client-operLog'
        },
        {
          value: '维修/正常',
          isCanUse: '0',
          role: 'consult-client-repair'
        }, {
          value: '清台',
          isCanUse: '1',
          role: 'consult-client-clear'
        },
      ])
      break;
    case '3': // 使用
      popupActive.value = 4
      popupTitle.value = '转台'
      tabBtnList.value = ([
        {
          value: '开台',
          isCanUse: '0',
          role: 'consult-client-open'

        },
        {
          value: '预订',
          isCanUse: '0',
          role: 'consult-client-reserve'
        },
        {
          value: '取消预订',
          isCanUse: '0',
          role: 'consult-client-reserveCancel'
        },
        {
          value: '复台记录',
          isCanUse: '0',
          role: 'consult-client-reset'
        },
        {
          value: '转台',
          isCanUse: '1',
          role: 'consult-client-transfer'
        },
        {
          value: '操作记录',
          isCanUse: '1',
          role: 'consult-client-operLog'
        },
        {
          value: '维修/正常',
          isCanUse: '0',
          role: 'consult-client-repair'
        }, {
          value: '清台',
          isCanUse: '0',
          role: 'consult-client-clear'
        },
      ])
      break;
    case '-1': // 维修
      popupActive.value = 6
      popupTitle.value = '维修/正常'
      roomRepairForm.value.state = '1'
      tabBtnList.value = ([
        {
          value: '开台',
          isCanUse: '0',
          role: 'consult-client-open'

        },
        {
          value: '预订',
          isCanUse: '0',
          role: 'consult-client-reserve'
        },
        {
          value: '取消预订',
          isCanUse: '0',
          role: 'consult-client-reserveCancel'
        },
        {
          value: '复台记录',
          isCanUse: '0',
          role: 'consult-client-reset'
        },
        {
          value: '转台',
          isCanUse: '0',
          role: 'consult-client-transfer'
        },
        {
          value: '操作记录',
          isCanUse: '1',
          role: 'consult-client-operLog'
        },
        {
          value: '维修/正常',
          isCanUse: '1',
          role: 'consult-client-repair'
        }, {
          value: '清台',
          isCanUse: '0',
          role: 'consult-client-clear'
        },
      ])
      break;
  }
  // 如果不是今日 开台功能禁用 默认第二个
  if (timeActive.value != 0) {
    popupActive.value = 1
    popupTitle.value = '预订'
    tabBtnList.value[0].isCanUse = '0'
    tabBtnList.value[6].isCanUse = '0'
  }
  if (v.isLock) {
    tabBtnList.value = ([
      {
        value: '开台',
        isCanUse: '0',
        role: 'consult-client-open'

      },
      {
        value: '预订',
        isCanUse: '0',
        role: 'consult-client-reserve'
      },
      {
        value: '取消预订',
        isCanUse: '0',
        role: 'consult-client-reserveCancel'
      },
      {
        value: '复台记录',
        isCanUse: '0',
        role: 'consult-client-reset'
      },
      {
        value: '转台',
        isCanUse: '0',
        role: 'consult-client-transfer'
      },
      {
        value: '操作记录',
        isCanUse: '1',
        role: 'consult-client-operLog'
      },
      {
        value: '维修/正常',
        isCanUse: '0',
        role: 'consult-client-repair'
      }, {
        value: '清台',
        isCanUse: '0',
        role: 'consult-client-clear'
      },
    ])
  }
}

const tabBtnList = ref([
  {
    value: '开台',
    isCanUse: '1',
    role: 'consult-client-open'

  },
  {
    value: '预订',
    isCanUse: '1',
    role: 'consult-client-reserve'
  },
  {
    value: '取消预订',
    isCanUse: '1',
    role: 'consult-client-reserveCancel'
  },
  {
    value: '复台记录',
    isCanUse: '1',
    role: 'consult-client-reset'
  },
  {
    value: '转台',
    isCanUse: '1',
    role: 'consult-client-transfer'
  },
  {
    value: '操作记录',
    isCanUse: '1',
    role: 'consult-client-operLog'
  },
  {
    value: '维修/正常',
    isCanUse: '1',
    role: 'consult-client-repair'
  }, {
    value: '清台',
    isCanUse: '1',
    role: 'consult-client-clear'
  },
])
const popupActive = ref(0) // 弹窗头部tab
const roomName = ref('')
const showTime = ref('') // 开台预订到店时间（组件用）
const timeNow = ref(dayjs().format('HH:mm'))
const timeSelect = (e) => {
  if (e) {
    const currentDate = currentTime.value;
    console.log(currentDate);
    const fixedTime = dayjs(e).format('HH:mm:ss');
    const dateTimeString = `${currentDate} ${fixedTime}`;
    showTime.value = dateTimeString
    console.log(showTime.value);
  }

}
const form = ref({
  memberName: '', // 会员姓名
  roomCode: '', // 房台号
  reserveCode: '',
  callCode: '',
  memberMobile: '', // 手机号码
  memberOpenid: '',
  sex: '011001', // 性别
  sourceType: '', // 来源
  openTime: '', // 开台时间
  waiterUser: '', // 开台人
  maintainUser: '', // 订台人
  maintainUser_old:'', // 旧订台人
  arrivedPeoperCount: '1', // 人数
  minConsume: '', // 低消
  specialRequireType: '', // 特殊要求
  remark: '',
  isSendMsm: '1', // 是否发送短信
  reserveTime: '', // 计划到达时间
  cancelReason: '' // 取消原因
})
const closeDig = () => {
  popupShow.value = false
  selectedValue.value = ""
  selectedValueText.value = ""
}
// 提交
const subFlag = ref(false)
const onSubmit = () => {
  if (lockShow.value) {
    ElNotification({
      title: '提示',
      message: '已锁定房台不能进行操作',
      type: 'warning',
    })
    return
  }
  if(subFlag.value){
    ElNotification({
      title: '提示',
      message: '加载中，请稍等',
      type: 'warning',
    })
    return
  }
  subFlag.value = true
  form.value.reserveTime = showTime.value // 时间赋值
  if(selectedValue.value ) {
    form.value.maintainUserName = selectedValueText.value
    form.value.maintainUser = selectedValue.value //訂台人
  }
  console.log(form.value);
  switch (popupTitle.value) {
    case '开台':
      if (form.value.arrivedPeoperCount == '') {
        ElNotification({
          title: '提示',
          message: '就餐人数不能为空',
          type: 'error',
        })
        subFlag.value = false
        return
      }
      if (form.value.memberMobile) { // 有输入手机号就要校验
        if (!validateMobile(form.value.memberMobile)){
          subFlag.value = false
          return
        } 
      }
      form.value.openTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      Api.Common.PcObjProcess.Do({ "functionName": "roomOpen", "contentData": form.value })
        .then(res => {
          ElNotification({
            title: '提示',
            message: '开台成功',
            type: 'success',
          })
          selectedValueText.value = ''
          popupShow.value = false
          subFlag.value = false
          getTableInfo()
          CopygetTableInfo()
        })
        .catch(err=>{
          subFlag.value = false
        })
      break
    case '预订':
      console.log(form.value);
      if (form.value.arrivedPeoperCount == '') {
        ElNotification({
          title: '提示',
          message: '就餐人数不能为空',
          type: 'error',
        })
        subFlag.value = false
        return
      }
      // if (form.value.memberMobile == '') {
      //   ElNotification({
      //     title: '提示',
      //     message: '手机号不能为空',
      //     type: 'error',
      //   })
      //   return
      // } else {
      //   if (!validateMobile(form.value.memberMobile)) return
      // }
      // if (form.value.memberName == '') {
      //   ElNotification({
      //     title: '提示',
      //     message: '客户姓名不能为空',
      //     type: 'error',
      //   })
      //   return
      // }
      // return
      form.value.reserveTime = dayjs(form.value.reserveTime).format('YYYY-MM-DD HH:mm:ss')
      Api.Common.PcObjProcess.Do({ "functionName": "reserveAdd", "contentData": form.value })
        .then(res => {
          console.log(res);
          ElNotification({
            title: '提示',
            message: '预订成功',
            type: 'success',
          })
          popupShow.value = false
          selectedValueText.value = ''
          subFlag.value = false
          getTableInfo()
          getReserveList(true) // 获取预订列表
          GetReserveStateCount() // 获取预订统计
        }).catch(err=>{
          subFlag.value = false
        })
      break
    case '取消预订':
      Api.Common.PcObjProcess.Do({ "functionName": "reserveCancel", "contentData": form.value })
        .then(res => {
          ElNotification({
            title: '提示',
            message: res.result,
            type: 'success',
          })
          popupShow.value = false
          subFlag.value = false
          selectedValueText.value = ''
          getTableInfo()
        }).catch(err=>{
          subFlag.value = false
        })
      break
    // case '转台':
    //   Api.Common.PcObjProcess.Do({"functionName":"RoomChange","contentData":{"oldRoomCode":"0004002","newRoomCode":"0004006","consumeCode":"0004202402260003","peopleCount":"8"}})
    //   .then(res=>{
    //     console.log(res);
    //     // ElNotification({
    //     //   title: '提示',
    //     //   message: res.result,
    //     //   type: 'success',
    //     // })
    //     popupShow.value = false
    //     getTableInfo()
    //   })
    //   break
    // case '操作记录':

    //   break
    // case '维修/正常':

    //   break

  }
}
// 短信通知改变
const radioChange = (e) => {
  if (form.value.isSendMsm == '0') {
    form.value.isSendMsm = '1'
  } else {
    form.value.isSendMsm = '0'
  }
}
const radioChange2 = (e) => {
  if (canclePreForm.value.isSendMsm == '0') {
    canclePreForm.value.isSendMsm = '1'
  } else {
    canclePreForm.value.isSendMsm = '0'
  }
}


// 手机号码失去聚焦
const searchInfo = (e) => {
  if (!form.value.memberMobile) {
    return
  }
  Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": form.value.memberMobile } })
    .then(res => {
      if (res) {
        form.value.memberName = res.name;// res.name
      }
    })
}
// 咨客大厅弹窗来源变化
const formSourceChange = (e) => {
  console.log(e);
  selectedValue.value = ""
  selectedValueText.value = ""
  if (e != '104004') {
    form.value.maintainUser = ''
  }
}
// ------------------------------------------------- 操作记录 ------------------------------------------------
const recordsTimeActive = ref(0)
const recordsCurrentTime = ref('')

const recordsTimeList = ref([
  {
    name: '今日',
    startTime: transformWorkTime('今日', orgStartTime, orgEndTime)[0], // format(dayjs().startOf('day')),
    endTime: transformWorkTime('今日', orgStartTime, orgEndTime)[1], // format(dayjs())
  },
  {
    name: '本周',
    startTime: transformWorkTime('本周', orgStartTime, orgEndTime)[0], // format(dayjs().startOf('week').startOf('day')),
    endTime: transformWorkTime('本周', orgStartTime, orgEndTime)[1] // format(dayjs())
  },
  {
    name: '本月',
    startTime: transformWorkTime('本月', orgStartTime, orgEndTime)[0],//format(dayjs().startOf('month').startOf('day')),
    endTime: transformWorkTime('本月', orgStartTime, orgEndTime)[1], // format(dayjs())
  },
  // {
  //   name: '自定义',
  //   value:dayjs().format('YYYY-MM-DD HH:mm:ss')
  // },
])
// 操作记录时间选择
const recordTimeSelect = (e) => {
  recordForm.value.stratDate = dayjs(e[0]).format('YYYY-MM-DD HH:mm:ss')
  recordForm.value.endDate = dayjs(e[1]).format('YYYY-MM-DD HH:mm:ss')
  getRoomOpeHistory()
}
// 操作记录分页
const changeRecordsPage = (e) => {
  console.log(e.target.dataset.type);
  if (e.target.dataset.type == 'down') {
    console.log(recordsTabDate.value);
    if (recordsTabDate.value.length <= 0) {
      return
    }
    recordForm.value.pageIndex++
  } else {
    if (recordForm.value.pageIndex - 1 <= 0) {
      return
    }
    recordForm.value.pageIndex--
  }
  getRoomOpeHistory()
}
// ----------------------------------------------------- 桌台选择弹窗 ---------------------------------------------------------------
const tableSelectShow = ref(false) // 桌台选择弹窗控制
const tableSelectActive = ref(0) // 选中桌台类型的下标
const tabSelActive = ref(0) // 选中桌台的下标
const selectedTabName = ref('') // 选中桌台的名字
const toolId = ref(0) // 过渡用
const selectedTabCode = ref('') // 选中桌台的code
// 打开桌台选择弹窗
const onShowTable = () => {
  tableSelectShow.value = true
  usePostForm.value.reserveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  getCanUseTables(true)
}
// 桌台选中切换
const onSelectTable = (e) => {
  console.log(e.target.dataset);
  if (e.target.dataset.id) {
    tabSelActive.value = e.target.dataset.id
  }
}
// 确认选中
const confirmSelect = (e) => {
  tableSelectShow.value = false
  turnTableForm.value.newRoomCode = freeTableList.value[tabSelActive.value].roomCode
  selectedTabName.value = freeTableList.value[tabSelActive.value].roomName

  if(consultActive.value === 'consult-book') {
    ztconfirmShow.value = true
  }
}
const lockForm = ref({
  roomList: '',
  state: '', // 1 设置锁定 0 设置解锁
  currentDate: ''
})
const lockShow = ref(false)
// 房台锁定
const lockRoom = (e) => {
  console.log(e);
  if (e) {
    lockForm.value.state = 1
  } else {
    lockForm.value.state = 0
  }
  lockForm.value.currentDate = dayjs(configStore.curTableDate).format('YYYY-MM-DD HH:mm:ss')
  // console.log('lockForm.value.currentDate :>> ', lockForm.value.currentDate);
  Api.Common.PcObjProcess.Do({ "functionName": "RoomLock", "contentData": lockForm.value })
    .then(res => {
      getTableInfo()
      ElNotification({
        title: '提示',
        message: '操作成功',
        type: 'success',
      })
    })
}

// 监听锁定状态
watch(() => lockShow.value, (oldvalue, newvalue) => {

  // 如果锁定 按钮全部不能用
  if (lockShow.value == '1') {
    tabBtnList.value.forEach(item => {
      item.isCanUse = 0

    });
  } else {
    // 如果没锁定，按钮恢复成空闲中时可用的
    tabBtnList.value.forEach(item => {
      switch (item.value) {
        case '开台': item.isCanUse = 1; break;
        case '预订': item.isCanUse = 1; break;
        case '复台': item.isCanUse = 1; break;
        case '操作记录': item.isCanUse = 1; break;
        case '维修/正常': item.isCanUse = 1; break;
      }
    });
  }
})


// 确认转台
const changeFlag = ref(false)
const confirmTurnTable = () => {
  if(changeFlag.value){
    ElNotification({
        title: '提示',
        message: "加载中，请稍等",
        type: 'success',
    })
  }
  changeFlag.value = true
  Api.Common.PcObjProcess.Do({ "functionName": "RoomChange", "contentData": turnTableForm.value })
    .then(res => {
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
      popupShow.value = false
      getTableInfo()
      changeFlag.value = false
    }).catch(err=>{
      changeFlag.value = false
    })
}
// 转台参数
const turnTableForm = ref({
  oldRoomCode: '', // 旧桌台
  newRoomCode: '', // 新桌台
  consumeCode: '', // 消费单号
  peopleCount: '',
  reserveCode: '' // 预订编号 
})

// 空闲桌台弹窗上下页切换
const onChangePage = (e) => {
  console.log(e.target.dataset.type);
  if (e.target.dataset.type == 'down') {
    if (freeTableList.value.length < usePostForm.value.pageSize) {
      return
    } else {
      usePostForm.value.pageIndex++
    }

  } else {
    if (usePostForm.value.pageIndex <= 1) {
      return
    } else {
      usePostForm.value.pageIndex--
    }
  }
  getCanUseTables()
}
// 所有房台弹窗上下页切换
const onAllChangePage = (e) => {
  console.log(e.target.dataset.type);
  console.log(postForm.value.pageIndex);
  if (e.target.dataset.type == 'down') {
    if (tableList.value.length < postForm.value.pageSize) {
      return
    } else {
      postForm.value.pageIndex++
    }

  } else {
    if (postForm.value.pageIndex <= 1) {
      return
    } else {
      postForm.value.pageIndex--
    }
  }
  getTableInfo()
}

const totalPages = computed(() => Math.ceil(pageCount.value / postForm.value.pageSize));
console.log(totalPages, '总页数')

const canNextPage = computed(() => postForm.value.pageIndex < totalPages.value);

//上一页
const prevPage = () => {
  if (postForm.value.pageIndex > 1) {
    postForm.value.pageIndex--
  }
  getTableInfo()
}

//下一页
const nextPage = () => {
  if (postForm.value.pageIndex) {
    postForm.value.pageIndex++;
  }
  getTableInfo()
}

const pageCount = ref('')

// 获取房台
const postForm = ref({
  reserveTime: '',
  roomState: '',
  typeCode: '',
  areaCode: '',
  pageSize: 23,
  pageIndex: 1,
  key: '' // 模糊查询
})
const getTableInfo = (flag,clear) => {
  loadingTable.value = true
  if (flag) {
    postForm.value.pageIndex = 1
  }
  Api.Common.PcObjProcess.Do({ "functionName": "GetReserveRoomList", "orgCode": "0004", "contentData": postForm.value })
    .then(res => {
      tableList.value = res.result[0].areaRooms
      console.log(res.result[0]);
      console.log(tableList.value, 'typeList.value[0].num--------');
      typeList.value[0].num = res.result[0].totalCount
      console.log(typeList.value[0].num, 'typeList.value[0].num--------')
      typeList.value[1].num = res.result[0].noCount
      typeList.value[2].num = res.result[0].reserveCount
      typeList.value[3].num = res.result[0].useCount
      typeList.value[4].num = res.result[0].unPayCount
      typeList.value[5].num = res.result[0].repairCount
      typeList.value[6].num = res.result[0].lockCount
      configStore.curTable = tableList.value
      pageCount.value = res.result[0].allCount
      console.log(res, '查询列表数据--------------------------------')
      loadingTable.value = false
    })
}
// 获取空闲房台
const usePostForm = ref({
  reserveTime: '',
  roomState: '0',
  typeCode: '',
  pageSize: 38,
  pageIndex: 1,
  areaCode: '',
  key: postForm.value.key
})
const freeTableList = ref([])
const getCanUseTables = (flag) => {
  if (flag) {
    usePostForm.value.pageIndex = 1
  }
  usePostForm.value.reserveTime = currentTime.value
  Api.Common.PcObjProcess.Do({ "functionName": "GetReserveRoomList", "orgCode": "0004", "contentData": usePostForm.value })
    .then(res => {
      freeTableList.value = res.result[0].areaRooms // 选择桌台弹窗显示的桌台
      console.log(freeTableList.value);
    })
}
// 获取房台类型
const getTableType = () => {
  let newArray = [{ code: '', name: '全部' }]
  Array.prototype.push.apply(newArray, configStore.zoneList)
  zoneList.value = newArray
  console.log(zoneList.value);
}
// roomArea
// 获取房台分区
const getRoomArea = () => {
  let newArray = [{ roomAreaCode: '', roomAreaName: '全部' }]
  Array.prototype.push.apply(newArray, configStore.roomArea)
  roomArea.value = newArray
  console.log(roomArea.value);
}
// 获取服务员列表
const waiterList = ref([])
const getWaiterList = () => {
  const transArea = [
    ['userCode', 'value'],
    ['userName', 'label']
  ]
  waiterList.value = transformArrayProps(configStore.waiterList, transArea)
  waiterList.value.push({ value: '', label: '无' })

  // const t = '张三';
  const t = ls.get('USER_INFO').userName;
  console.log(waiterList.value);

  const result = waiterList.value.find(item => item.label === t)?.value || null;
  console.log(result, 'ddddddddddddddddd')
  if (result != null) {
    form.value.waiterUser = result
  }
}
// 获取订台人列表
const customerManageList = ref([])
const getCustomerManageList = () => {
  const transArea = [
    ['userCode', 'value'],
    ['userName', 'label']
  ]
  customerManageList.value = transformArrayProps(configStore.customerManageList, transArea)
  customerManageList.value.push({ value: '', label: '无' })
}
// 获取来源
const fromList = ref([])
const getFrom = () => {
  const transArea = [
    ['code', 'value'],
    ['name', 'label']
  ]
  fromList.value = transformArrayProps(configStore.sourceList, transArea)
  console.log(fromList.value)
  fromList.value.push({ value: '', label: '无' })
}
// 获取特殊要求
const speAskList = ref([])
const getSpeAsk = () => {
  const transArea = [
    ['code', 'value'],
    ['name', 'label']
  ]
  speAskList.value = transformArrayProps(configStore.specialList, transArea)
  speAskList.value.push({ value: '', label: '无' })
}
// 获取取消原因
const cancleList = ref([])
const getCancleList = () => {
  const transArea = [
    ['code', 'value'],
    ['name', 'label']
  ]
  cancleList.value = transformArrayProps(configStore.cancelList, transArea)
  cancleList.value.push({ value: '', label: '无' })
}

// 获取操作记录 初始化时间必须遵守transformWorkTime('今日',orgStartTime,orgEndTime)
const recordsTabDate = ref([])
const recordForm = ref({
  stratDate: transformWorkTime('今日', orgStartTime, orgEndTime)[0], // format(dayjs().startOf('day')),
  endDate: transformWorkTime('今日', orgStartTime, orgEndTime)[1], // format(dayjs()),
  roomCode: '',
  pageSize: '10',
  pageIndex: '1',
})
const getRoomOpeHistory = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetRoomOpeHistory", "contentData": recordForm.value })
    .then(res => {
      recordsTabDate.value = res.data.map(obj => {
        return {
          ...obj,
          crDate: dayjs(obj.crDate).format('YYYY-MM-DD HH:mm:ss')
        };
      })
      console.log(recordsTabDate.value);
    })
}
// 房台维修
const roomRepairForm = ref({
  roomList: '', // 房台code
  state: '0' // 1 设置为正常 0 设置为维修
})
const roomRepair = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "roomRepair", "contentData": roomRepairForm.value })
    .then(res => {
      console.log(res);
      confirmShow.value = false
      popupShow.value = false
      getTableInfo()
    })
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
  .then((ipAddress) => {
    // 在这里处理获取到的 IP 地址
    ip.value = ipAddress;
    console.log("IP 地址:", ip.value);
  })
  .catch((error) => {
    console.error("发生错误:", error);
    // 在这里处理错误情况
  });
// 清台
const clearRoomCode = ref('')
const roomClear = () => {
  console.log(clearRoomCode.value);
  Api.Common.PcObjProcess.Do({ "functionName": "roomClear", "contentData": { "roomList": clearRoomCode.value, "ip": ip.value } })
    .then(res => {
      console.log(res);
      popupShow.value = false
      getTableInfo()
    })
}
// 获取预订列表
const reserveListForm = ref({
  currentDate_Start: dayjs().startOf('day').format('YYYY-MM-DD'), // 开始时间
  currentDate_End: dayjs().format('YYYY-MM-DD'), // 结束时间
  maintainUser: '', // 订台人编号
  state: '', //  0取消 1预订 2开台
  roomCode: '', // 房台号
  key: '', // 姓名/手机号
  source: '', // 来源
  pageSize: 10,
  pageIndex: '1',
  reserveAmtState: '',
  cancelReason: '',
  remark: '',
  isBlack: ''
})
const getReserveList = (flag) => {
  if (flag) {
    reserveListForm.value.pageIndex = 1
  }
  Api.Common.PcObjProcess.Do({ "functionName": "GetReserveList", "contentData": reserveListForm.value })
    .then(res => {
      console.log(15);
      console.log(res);
      reserveList.value = res.result.map(obj => {
        if (obj.ReserveTime) {
          obj.ReserveTime = dayjs(obj.ReserveTime).format('YYYY-MM-DD HH:mm')
        }
        if (obj.ArriveTime) {
          obj.ArriveTime = dayjs(obj.ArriveTime).format('YYYY-MM-DD HH:mm')
        }
        return obj
      })
    })
}
// 获取预订统计
const reserveStateInfo = ref({}) // 预订统计信息
const getReserveStateForm = ref({
  currentDate_Start: format(dayjs().startOf('day')), // 开始时间
  currentDate_End: format(dayjs()) // 结束时间

})
const GetReserveStateCount = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetReserveStateCount", "contentData": getReserveStateForm.value })
    .then(res => {
      console.log(res);
      reserveStateInfo.value = res
    })
}
// 取消预订
const canclePreForm = ref({
  reserveCode: '', // 预订编号
  cancelReason: '', // 取消原因
  isSendMsm: '1', // 是否发送短信
  remark: '' // 备注
})
const reserveCancel = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "reserveCancel", "contentData": canclePreForm.value })
    .then(res => {
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
      getReserveList(true)
    })
}
// 拉入黑名单
const blackMobiles = ref('')
const setMemberBlack = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "SetMemberBlack", "contentData": { "memberMobiles": blackMobiles.value } })
    .then(res => {
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })

    })
}
// ------------------------------------------------ 渲染回显过滤数据 --------------------------------------------------------

const filterUserNameMain = (allName) => {
  let result = ''
  // 切割 - 获取第一个
  let nameList = allName.split('-')
  result = nameList[0]
  return result
}

const filterUserNameSecond = (allName) => {
  let result = ''
  // 切割 - 获取第二个
  let nameList = allName.split('-')
  if (nameList.length < 2) {
    return ''
  }
  result = nameList[1]
  return result
}


// ------------------------------------------------ 初始化 --------------------------------------------------------

const onInit = async () => {
  postForm.value.reserveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  getTableInfo() // 获取房台
  getRoomArea() // 获取房台分区
  getTableType() // 获取房台类型
  getWaiterList() // 获取服务员列表
  getCustomerManageList() // 获取订台人列表
  getFrom() // 获取来源
  getSpeAsk() // 获取特殊要求
  getCancleList() // 获取取消原因
  getReserveList(true) // 获取预订列表
  GetReserveStateCount() // 获取预订统计
}
//  正常有 [{ name: '咨客大厅' }, { name: '预订列表' }]
const consultList = ref([])

// 判断是否有菜单权限
const initFilter = () => {
  let localConsultList = [{
    title: '咨客大厅',
    name: 'consult-client'
  },
  {
    title: '预订列表',
    name: 'consult-reserve'
  },
  {
    title: '今日预订列表',
    name: 'consult-book'
  }
]
  const roleAll = new Map(ls.get('USER_ROLE_ALL').map(item => [item.name, item]));
  consultList.value = localConsultList.filter(item => roleAll.has(item.name))
  if (consultList.value.length > 0) {
    consultActive.value = consultList.value[0].name
    onInit()
    // onChangeTab('consult', consultActive.value)
  } else {
    ElNotification({
      title: '提示',
      message: '当前没有权限访问该页面，请联系管理员',
      type: 'warning',
    })
  }
}

const treeData = ref([])
// 绑定的选择值
const selectedValue = ref('');
const selectedValueText = ref('');
//获取订台人配置
const getGetOrgGroup = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetOrgGroup", "contentData": "" })
    .then(res => {
      console.log(res, '列表数据')
      if (res.result.length > 0) {
        treeData.value = res.result
      }
    })
}
getGetOrgGroup()

const handleSelectionChange = (value) => {
  selectedValue.value = value
  // 遍历 treeData 查找匹配的节点
  for (let group of treeData.value) {
    // 遍历该组的子节点（children）
    for (let child of group.children) {
      // 判断子节点的 value 是否与选中的值匹配
      if (child.value === value) {
        // 拼接上一级的 label（父节点）和当前子节点的 label
        const result = `${group.label} - ${child.label}`;
        // 将拼接结果存储到 formData.selectedName 中（或者其他需要显示的地方）
        selectedValueText.value = result;
        return; // 找到匹配项后结束函数
      }
    }
  }
};

const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}

const checked3 = ref(true)
const checked4 = ref(true)
const checked5 = ref(true)
const checked6 = ref(true)

// ------------------------------------------------ 清台操作 --------------------------------------------------------------------
const ResetAllVisible = ref(false) //清台弹层
const CleartableList = ref([])//清台房台列表
const loadingTable = ref(false)//房台加载loading

const handleResetAll = ()=> {
  if(CleartableList.value.length >0) {
    ResetAllVisible.value = true
  } else  {
    ElNotification({
        title: '提示',
        message: '暂无桌台可清',
        type: 'warning',
    })
  }
}

//打开加载loading
const Openemit = ()=> {
  loadingTable.value = true
}

const closeDialog = ()=> {
  ResetAllVisible.value = false
}

const closeLoading = ()=> {
        loadingTable.value = false
        getTableInfo()
}


// 点击弹窗里的取消按钮
const emitResetAllCancel = (params) => {
    ResetAllVisible.value = false
}
// 点击弹窗里的确定按钮
const emitResetAllSubmit = (params) => {
    ResetAllVisible.value = false
    loadingTable.value = false
    CleartableList.value = []
    getTableInfo()
    CopygetTableInfo()
} 
//复制房台列表数据
const CopygetTableInfo = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetReserveRoomList", "orgCode": "0004", "contentData": {...postForm.value,pageSize:1,pageSize:999} })
    .then(res => {
      CleartableList.value = res.result[0].areaRooms.filter(room => room.roomStateDesc !== "预订中" && room.roomStateDesc !== "空闲中")
      console.log(CleartableList.value, '查询清台列表数据--------------------------------')
      console.log(res.result[0].allCount, '数量')
    })
}

// ------------------------------------------------ 加载预订信息操作 --------------------------------------------------------------------
const TodayReserveList = ref([])
const ztconfirmShow = ref(false)
const ztroomName = ref('')

// const TodayForm = ref({
//         pageSize: 10,
//         pageIndex: '1',
// }) 
// const todycurrentPage = ref()
// 加载预订信息列表
const GetTodayReserve = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetTodayReserve", "orgCode": "0004", "contentData": ""})
    .then(res => {
         TodayReserveList.value = res.result
         TodayReserveList.value.map(item=> {
                if(item.reserveCode !== item.roomReserveCode) {
                      item.state = true
                }
         })
         console.log(TodayReserveList.value,'TodayReserveList.value')
    })
}

const ztFlag = ref(false)
const  confirmztTable = ()=> {
        //  ztconfirmShow.value = false
    if(ztFlag.value){
        ElNotification({
            title: '提示',
            message: "加载中，请稍等",
            type: 'success',
        })
  }
  ztFlag.value = true
 
  let params = {
        newRoomCode: turnTableForm.value.newRoomCode,
        oldRoomCode: rowsObj.value.roomCode,
        reserveCode: rowsObj.value.reserveCode
  }

   console.log(params,'params')
  Api.Common.PcObjProcess.Do({ "functionName": "RoomChange", "contentData": params})
    .then(res => {
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
      GetTodayReserve()
      ztFlag.value = false
      ztconfirmShow.value = false
      tableSelectShow.value = false
    }).catch(err=>{
      ztFlag.value = false
    })
 }

const rowsObj = ref({})
const handleTurntable = (row)=> {
     rowsObj.value = row
     ztroomName.value = row.roomName
     tableSelectShow.value = true
     usePostForm.value.reserveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
     getCanUseTables(true)
}

onMounted(() => {
  initFilter()
  CopygetTableInfo()
});
</script>


<style scoped lang="scss">
@import '@/styles/com_style_input.css';

.consult-container {
  white-space: nowrap;

  .consult-tabs {
    display: flex;

    .consult-tab {
      width: 240px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      text-align: center;
      padding: 21px 0;
      margin-right: 40px;
      cursor: pointer;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
      line-height: 18px;

      &.active {
        background: #ffd400;
        border: 1px solid;
        color: #212121;
        border: none !important;
      }
    }
  }

  .table-main {
    padding-top: 20px;
    display: flex;
    min-height: 800px;

    .table-sidebar {
      background: #ffffff;
      border-radius: 8px;
      text-align: center;
      min-width: 120px;

      .title_box {
        width: 120px;
        // padding: 18px 0;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        color: #666666;
        text-align: center;
        cursor: pointer;

        .title {
          margin: 0 auto;
          width: 80px;
          height: 60px;
          line-height: 60px;
          border-bottom: 1px solid #D9D9D9;
        }
      }

      &-title {
        padding: 30px 0;
        border-bottom: 1px solid #e6e6e6;
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 18px;
        color: #000000;
        line-height: 18px;
      }

      &-list {}

      .active {
        background: #ffe566;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #212121;
        line-height: 18px;

        .title {
          border: none !important;
        }
      }

      .title_box:nth-last-child(1) .title {
        border-bottom: none;
      }

      // &-item {
      //   padding: 21px 0;
      //   font-family: Microsoft YaHei;
      //   font-weight: 400;
      //   font-size: 18px;
      //   color: #666666;
      //   line-height: 18px;
      //   cursor: pointer;

      //   &.active {
      //     background: #ffe566;
      //     font-family: Microsoft YaHei;
      //     font-weight: 400;
      //     font-size: 18px;
      //     color: #212121;
      //     line-height: 18px;
      //   }
      // }
    }

    .table-panel {
      margin-left: 20px;
      padding: 20px 20px 20px 20px;
      background: #ffffff;
      border-radius: 8px;

      .table-time-tabs {
        display: flex;

        .table-time-tab {
          background: #ffffff;
          border-radius: 8px;
          border: 1px solid #e6e6e6;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #666666;
          line-height: 16px;
          margin-right: 12px;
          padding: 16px 0;
          width: 120px;
          text-align: center;
          cursor: pointer;

          &.active {
            background: #ffe566;
            border: 1px solid #ffe566;
            color: #212121;
          }
        }
      }

      .table-type-tabs {
        // width: 1200px;
        padding: 23px 0;
        display: flex;

        .table-type-tab {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          line-height: 16px;
          display: flex;
          margin-right: 50px;
          cursor: pointer;
          align-items: center;

          &.active {
            .table-type-name {
              color: #ff6a00;
            }
            .table-type-num {
            color: #ff6a00;
            }
          }
        }

        .table-type-tab:nth-last-child(1) {
          margin-right: 0;
        }

        .table-type-tag {
          width: 12px;
          height: 12px;
          margin-right: 8px;

          &.free {
            background: #77d977;
          }

          &.book {
            background: #77c8d9;
          }

          &.used {
            background: #d9b877;
          }

          &.nopay {
            background: #ff3333;
          }

          &.stop {
            background: #cccccc;
          }

          &.lock {
            background: #6666FF;
          }
        }

        .table-type-name {
          color: #666666;
        }

        .table-type-num {
          color: #666666;
        }
      }

      .table-list {
        padding-top: 8px;
        width: 1340px;
        border-top: 1px solid #e6e6e6;
        display: flex;
        flex-wrap: wrap;

        .table-item {
          width: 157px;
          min-height: 200px;
          // text-align: center;
          background: #daf2da;
          border-radius: 8px;
          border: 1px solid #f2f2f2;
          padding-bottom: 15px;
          margin-top: 8px;
          margin-right: 12px;
          cursor: pointer;
          position: relative;

          &.pre {
            background: #DAEEF2;
          }

          &.noPay {
            background: #ff3333;
          }

          &.use {
            background: #F2EADA;
          }

          &.res {
            background: #E6E6E6;
          }

          &:nth-child(8n) {
            margin-right: 0;
          }

          &-name {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 19px;
            color: #212121;
            line-height: 24px;
            padding-top: 12px;
            flex: 1;
          }

          &-type {
            background: #77d977;
            border-radius: 4px;
            width: 80px;
            padding: 6px 0;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            line-height: 20px;
            margin: auto;
            margin-top: 6px;

            &.pre {
              background: #77C8D9;
              color: #FFFFFF;
            }

            &.use {
              background: #D9B877;
              color: #FFFFFF;
            }

            &.noPay {
              background: #ff3333;
              color: #FFFFFF;
            }

            &.res {
              background: #CCCCCC;
              color: #FFFFFF;
            }
          }

          &-max {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
            line-height: 16px;
            padding-top: 10px;
          }

          &-low {
            width: 200px;
            white-space: normal;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
            line-height: 16px;
            padding-top: 8px;
          }
          .low-warp {
              // display: flex;
            // flex-wrap: wrap;
          width: 180px;
          white-space: nowrap;          /* 禁止文本换行 */
          overflow: hidden;             /* 隐藏溢出的文本 */
          text-overflow: ellipsis;      /* 超出部分显示省略号 (...) */
          display: inline-block;        /* 确保容器能够处理文本溢出 */
          max-width: 100%;              /* 根据需要限制最大宽度，避免超出容器 */
          }

          &-lock {
            position: absolute;
            width: 40px;
            height: 40px;
            right: 0;
            top: 0;
            background-image: url('https://oss.jtmckj.com/pc/images/common/i_icon_locked.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
          &-turn {
            position: absolute;
            width: 30px;
            height: 30px;
            right: 6px;
            bottom: 6px;
            background-image: url('https://oss.jtmckj.com/pc/images/common/i_icon_turn.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
          .main-box {
          position: absolute;
          right: 6px;
          bottom: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
        .main-text {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #FF6A00;
          }
          .main-img {
            width: 30px;
            height: 30px;
           }
        
        }
       
        .sublt-box {
          position: absolute;
          right: 8px;
          bottom: 10px;
          display: flex;
          .liantai-text {
            // position: absolute;
            // bottom: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #FF6A00;
          }
        }
        }

        .table-control {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 157px;
          margin-top: 12px;
          z-index: 100;
          .table-btn {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #212121;
            line-height: 24px;
            padding: 33px 0;
            text-align: center;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
            cursor: pointer;
            // margin-bottom: 15px;
          }
        }
      }
    }
  }

  .book-main {

    .book-top {
      background: #FFFFFF;
      border-radius: 8px 8px 0px 0px;
      padding: 20px 28px 0 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 0 0;

      .book-top-item {
        display: flex;
        justify-content: space-between;
        // flex-direction: column;
        // align-items: end;
        flex-wrap: wrap;
      }

      .upper-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        ::v-deep(.el-date-editor .el-range__icon) {
          display: none
        }
      }

      .below-item {
        // display: flex;
        // align-items: center;
      }

      .book-title {
        text-align: right;
        width: 150px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
        white-space: nowrap;
      }

      .book-buttom {
        width: 120px;
        height: 48px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #212121;
        line-height: 18px;
        background: #FFE566;
        border-radius: 8px;
      }

      ::v-deep(.el-select__wrapper) {
        // width: 350px;

        height: 48px;
      }

      ::v-deep(.el-input__wrapper) {
        width: 100%;
        height: 48px;
      }
    }

    .book-more {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      // space-evenly;
      padding: 0 30px;
      background: #FFFFFF;
      margin-bottom: 20px;
      border-radius: 0px 0px 8px 8px;

      .more-item {
        display: flex;
        align-items: center;
        flex: 1;

        // padding-left: 60px;
        // padding-right: 170px;
        .book-title {
          width: 120px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #212121;
          line-height: 16px;
        }

        ::v-deep(.el-radio-group) {
          display: flex;
          flex-wrap: nowrap
        }
      }

      .book-top-botton {
        display: flex;
      }

      .botton-item {
        width: 100px;
        height: 48px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #212121;
        line-height: 48px;
        background: #FFE566;
        border-radius: 8px;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        margin-left: 20px;
      }

      ::v-deep(.el-radio__inner) {
        // margin-left: 20px;
        width: 20px;
        height: 20px
      }

      ::v-deep(.el-radio__input.is-checked+.el-radio__label) {
        color: #212121;
      }

      ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
        border-color: #ff6a00;
        /* 选中状态边框颜色 */
        background-color: #ffffff;
        /* 选中状态背景颜色 */
      }

      ::v-deep(.el-radio__inner:after) {
        background-color: #ff6a00;
        width: 8px;
        height: 8px;
      }
    }

    .book-center {
      padding: 20px 28px 0;
      background: #FFFFFF;
      border-radius: 8px;
      min-height: 400px;

      .book-center-upper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .center-upper-left {
          display: flex;
          align-items: center;

          .left-item {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 20px;
            color: #212121;
            line-height: 20px;
            margin-right: 60px
          }

          .item-num {
            color: #FF6A00;
          }
        }

        .center-upper-right {
          display: flex;
          align-items: center;

          .right-button {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #212121;
            line-height: 18px;
            background: #FFE566;
            border-radius: 8px;
            // padding: 15px 24px;
            width: 110px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
          }
        }
      }

      .book-table {
        padding-bottom: 8px;
        // .mycell{
        //   color: red;
        // }

      }

      .el-table--fit {
        height: 300px;
      }


      ::v-deep(.el-table .cell) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 14px;
      }

      ::v-deep(.tableHeaderRowClassName th) {
        background-color: #F9F9F9;
      }

      ::v-deep(.el-table__inner-wrapper:before) {
        display: none;
      }

      ::v-deep(.el-table td.el-table__cell) {
        border: none;
      }

      ::v-deep(.el-checkbox__inner) {
        width: 20px;
        height: 20px;
        border-color: #666666;
      }

      ::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
        background: #ffffff;
        border-color: #ff6a00;
      }

      ::v-deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
        background: #ffffff;
        border-color: #666666;
      }

      ::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner:after) {
        border-color: #ff6a00;
        transform: rotate(45deg) scaleY(1);
        left: 8px;
        top: 4px;
      }
    }

    .book-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 14px;

      .footer-button {
        background: #FF6A00;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 18px;
        padding: 15px 22px;
        margin-left: 20px;
        cursor: pointer;
      }

      ::v-deep(.el-pagination) {
        // width: 100%;
      }

      ::v-deep(.el-pagination>.is-first) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        line-height: 18px;
      }

      ::v-deep(li.number) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        line-height: 18px;
      }

      ::v-deep(.el-select__wrapper) {
        width: 140px;
        height: 48px;
        background: #E6E6E6;
        border-radius: 8px;
        // margin-right: 20px;
      }

      ::v-deep(.el-pagination.is-background .el-pager li) {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background-color: #E6E6E6;
      }

      ::v-deep(.el-pagination>.is-last) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        line-height: 18px;
      }

      ::v-deep(.el-input__wrapper) {
        width: 80px;
        height: 48px;
        background: #E6E6E6;
        border-radius: 8px;
      }

      ::v-deep(.el-pagination .el-input__inner) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        line-height: 18px;
      }

      ::v-deep(.el-pagination.is-background .el-pager li.is-active) {
        background-color: #FF6A00 !important;
        color: var(--el-color-white);
      }

      ::v-deep(.el-select__placeholder) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        line-height: 18px;
      }

      // ::v-deep(.el-pagination button *){
      //   width: 15px;
      //   height:24px;
      //   font-size: 18px;
      //   color: #666666;
      //   line-height: 18px;
      // }
    }

  }
}

:deep input::-webkit-inner-spin-button,
:deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

.popup {
  white-space: nowrap;
  background: #FFFFFF;
  border-radius: 16px;

  .popup-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 50px 0px;
    border-bottom: 1px solid #E6E6E6;

    .popup-top-item {
      // width: 208px;
      flex: 1 0 calc(25% - 16px);
      /* 计算每个子元素的宽度，减去 margin */
      height: 60px;
      text-align: center;
      background: #fff;
      border: 1px solid #E6E6E6;
      border-radius: 8px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
      line-height: 60px;
      margin-right: 16px;
      margin-bottom: 20px;
      cursor: pointer;

      &.active {
        background: #FFE566;
        color: #212121;
        border: none;
      }

      &.disabled {
        background: #E6E6E6;
        border-radius: 8px;
        color: #CCCCCC;
      }

      &.none {
        background: #FFFFFF;
      }
    }
  }

  .popup-title {
    margin: 0 60px;
    height: 91px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;

    .popup-title-item {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 20px;
      color: #212121;
      line-height: 20px;
    }

    ::v-deep(.el-switch__label *) {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #FF3333;
      line-height: 16px;
    }

    ::v-deep(.el-switch__core) {
      width: 80px;
      height: 36px;
      border-radius: 18px;
    }

    ::v-deep(.el-switch.is-checked .el-switch__core) {
      background: #FF6A00;
      border-color: #FF6A00;
    }

    ::v-deep(.el-switch__core .el-switch__action) {
      width: 32px;
      height: 32px;
      background: #FFFFFF;
      border-radius: 50%;
    }

    ::v-deep(.el-switch.is-checked .el-switch__core .el-switch__action) {
      left: calc(100% - 30px)
    }
  }

  .popup-main {
    padding: 20px 60px;

    .form {
      .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        &.spe {
          position: relative;

        }

        .form-item-time {
          position: absolute;
          left: 110px;
          top: 15px;
          z-index: 999;
        }

        .timePicke {
          ::v-deep(.el-input__inner) {
            padding-left: 90px !important;
          }
        }

        .input-span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #212121;
          line-height: 16px;
        }
      }

      .form-speItem {
        margin-bottom: 20px;

        ::v-deep(.el-radio__inner) {
          border-radius: 2px;
        }

        ::v-deep(.el-radio__input.is-checked) .el-radio__inner::after {
          content: '✔';
          width: 8px;
          height: 3px;
          border: 1px solid white;
          border-top: transparent;
          border-right: transparent;
          text-align: center;
          display: block;
          position: absolute;
          top: 2px;
          left: 6px;
          // transform: rotate(-45deg);
          color: #ff6a00;
          // font-size: 16px;
          border-radius: 0px;
          background-color: #ffffff;
        }
      }

      .form-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .form-footer-btn {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .btn-cancle {
            text-align: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FF6A00;
            line-height: 60px;
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            margin-right: 36px;
            cursor: pointer;
          }

          .btn-submit {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: center;
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            cursor: pointer;

          }
        }
      }

    }

    .turnTable {
      .turnTable-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
        padding: 20px 40px 40px;

        .turnTable-item-btn {
          width: 120px;
          height: 48px;
          background: #FFE566;
          border-radius: 8px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 18px;
          color: #212121;
          text-align: center;
          line-height: 48px;
          cursor: pointer;
        }
      }

    }

    .records {
      .records-top {
        display: flex;
        align-items: center;

        .records-top-tab {
          width: 120px;
          height: 48px;
          background: #FFFFFF;
          border-radius: 8px;
          text-align: center;
          border: 1px solid #E6E6E6;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #666666;
          line-height: 48px;
          cursor: pointer;
          margin-right: 20px;

          &.active {
            background: #FFE566;
            border: none;
            color: #212121;
          }
        }

        .data-tab {
          width: 120px;
          overflow: hidden;

          &.active {
            ::v-deep(.el-input__wrapper) {
              background-color: #FFE566 !important;
            }
          }

          ::v-deep(.el-input__wrapper) {
            width: 120px !important;
            height: 48px !important;
            display: block;
            overflow: hidden;
            background: #FFFFFF;
            border: 1px solid #E6E6E6;
            cursor: pointer;
          }

          ::v-deep(.el-range__icon) {
            display: none;
          }

          ::v-deep(.el-date-editor) {
            border-radius: 8px;
            text-align: center;
            padding: 0;
          }

          ::v-deep(.el-range-separator) {
            font-size: 16px;
            color: #666666;
            width: 120px !important;
            height: 48px !important;
            // display: none
          }

          ::v-deep(.el-date-editor .el-range-input) {
            display: none;
            // width: 0;
          }
        }
      }

      .records-time {
        text-align: right;
        padding: 10px 0;
      }
    }

    .service {
      .service-title {
        font-family: Microsoft YaHei;
        font-weight: 500;
        font-size: 20px;
        color: #212121;
        line-height: 20px;
        padding: 20px 30px
      }

      .service-radios {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0 20px;
      }
    }

    .clear {
      .clear-title {
        font-family: Microsoft YaHei;
        font-weight: 500;
        font-size: 20px;
        color: #212121;
        line-height: 20px;
        padding: 40px 30px;
        text-align: center;
      }
    }

    .popup-btn {
      display: flex;
      align-items: center;
      justify-content: center;

      .btn-cancle {
        text-align: center;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 24px;
        color: #FF6A00;
        line-height: 60px;
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        margin-right: 36px;
        cursor: pointer;

        &.spe {
          width: 80px;
          height: 40px;
          background: #F2F2F2;
          border-radius: 8px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #00AAFF;
          line-height: 40px;
          border: none;
        }
      }

      .btn-submit {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 60px;
        text-align: center;
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        cursor: pointer;

        &.spe {
          width: 80px;
          height: 40px;
          background: #F2F2F2;
          border-radius: 8px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #00AAFF;
          line-height: 40px;
        }
      }
    }

    ::v-deep(.el-form-item) {
      align-items: center;
    }

    ::v-deep(.el-input__wrapper) {
      width: 320px;
      height: 48px;
      background: #F9F9F9;
      border-radius: 8px;
      box-shadow: none;
    }

    ::v-deep(.el-form-item__label) {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #212121;
      line-height: 16px;
      // padding: 0 10px 0 0;
      height: auto;
      width: 70px;
      text-align: right;
    }

    ::v-deep(.el-select__wrapper) {
      width: 320px;
      height: 48px;
      background: #F9F9F9;
      border-radius: 8px;
      box-shadow: none;
    }

    ::v-deep(.el-form-item__content) {
      width: 320px;
      border-radius: 8px;
    }

    ::v-deep(.asterisk-left) {
      display: flex;
      align-items: center;
      margin: 0;
    }

    ::v-deep(.el-date-editor.el-input) {
      width: 320px;
      height: 48px;
    }

    ::v-deep(.el-radio__label) {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #666666;
      line-height: 16px;
    }
  }

  .lockShow-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 60px;
    padding-top: 10px;

    .lockShow-cancle {
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FF6A00;
      line-height: 60px;
      width: 160px;
      height: 60px;
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #FF6A00;
      margin-right: 36px;
      cursor: pointer;
    }

    .lockShow-submit {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 60px;
      text-align: center;
      width: 160px;
      height: 60px;
      background: #FF6A00;
      border-radius: 8px;
      cursor: pointer;
    }
  }

  ::v-deep(.el-select__icon) {
    width: 18px;
    height: 11px;
    color: #212121;
    font-weight: 700;
  }

  ::v-deep(.el-input__inner) {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
    line-height: 16px;
  }

  ::v-deep(.el-radio__inner) {
    // margin-left: 20px;
    width: 20px;
    height: 20px
  }

  ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #ff6a00;
    /* 选中状态边框颜色 */
    background-color: #ffffff;
    /* 选中状态背景颜色 */
  }

  ::v-deep(.el-radio__inner:after) {
    background-color: #ff6a00;
    width: 8px;
    height: 8px;
  }

  ::v-deep(.el-select__prefix) {
    display: none
  }
}

.tableSelect {
  white-space: nowrap;
  padding: 36px 52px 20px;

  .tableSelect-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding: 0 0 32px 8px;
  }

  .tableSelect-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 42px;
    background: #F2F2F2;
    border-radius: 8px;

    // padding-left: 8px;
    .tab-item {
      padding: 15px 0px;
      width: 16%;
      text-align: center;
      cursor: pointer;
      position: relative;

      &.active {
        color: #FF6A00;
      }

      .tab-item-bottom {
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 2px;
        background-color: #FF6A00;
        border-radius: 1px;
        display: none;

        &.active {
          display: block;
        }
      }
    }
  }

  .tableSelect-main {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    padding-top: 20px;

    .tableSelect-main-item {
      // flex: 1 0 calc(12.5% - 16px); /* 计算每个子元素的宽度，减去 margin */
      width: calc(12.5% - 16px);
      height: 96px;
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 24px;
      color: #212121;
      line-height: 96px;
      margin: 0 8px 16px 8px;
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #E6E6E6;
      cursor: pointer;

      &.spe {
        background: #E6E6E6;
      }

      &.active {
        background: #FFE566;
      }

      &.canNotUse {
        background: #F2F2F2;
        color: #CCCCCC;
      }
    }
  }

  .popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-cancle {
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FF6A00;
      line-height: 60px;
      width: 160px;
      height: 60px;
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #FF6A00;
      margin-right: 36px;
      cursor: pointer;
    }

    .btn-submit {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 60px;
      text-align: center;
      width: 160px;
      height: 60px;
      background: #FF6A00;
      border-radius: 8px;
      cursor: pointer;
    }
  }
}

.confirmPopue {
  .confirmPopue-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #E5E5E5;
  }

  .confirmPopue-center {
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 500;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding: 40px 0;

    .top-item {
      display: flex;
      align-items: center;
      padding: 0px 60px 20px;

      .top-item-title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
        width: 120px;
      }

      ::v-deep(.el-select__wrapper) {
        width: 40%;
      }
    }

  }

  .popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-cancle {
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FF6A00;
      line-height: 60px;
      width: 160px;
      height: 60px;
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #FF6A00;
      margin-right: 36px;
      cursor: pointer;
    }

    .btn-submit {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 60px;
      text-align: center;
      width: 160px;
      height: 60px;
      background: #FF6A00;
      border-radius: 8px;
      cursor: pointer;
    }
  }

  ::v-deep(.el-select__icon) {
    width: 18px;
    height: 11px;
    color: #212121;
    font-weight: 700;
  }

  ::v-deep(.el-input__inner) {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
    line-height: 16px;
  }

  ::v-deep(.el-radio__inner) {
    // margin-left: 20px;
    width: 20px;
    height: 20px
  }

  ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #ff6a00;
    /* 选中状态边框颜色 */
    background-color: #ffffff;
    /* 选中状态背景颜色 */
  }

  ::v-deep(.el-radio__inner:after) {
    background-color: #ff6a00;
    width: 8px;
    height: 8px;
  }

  ::v-deep(.el-select__prefix) {
    display: none
  }
}

.disabled_color {
  // background: #f9f9f9 !important;
  // color: #E5E5E5 !important;
  background: #FFFFFF;
  border-radius: 8px;
  color: #CCCCCC !important;
  border: 1px solid #E6E6E6;
  // margin-bottom: 12px;
}

.stbgf {
  background: #e7e7e7 !important;
}

::v-deep .el-switch.is-checked .el-switch__core .el-switch__action {
  left: calc(100% - 0.17854rem) !important;
}

.filter-continar {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-right: 20px;

  img {
    width: 26px;
    height: 26px;
  }

  .filter-text {
    margin-left: 3px;
    font-size: 16px;
    color: #FF5719;
  }
}

.k-table-flex {
  padding: 0 5px 0 15px ;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.table-item-padding {
  margin-top: 5px;
  padding-left: 14px;

  .fontsize {
    margin-top: 0 !important;
    line-height: 13px !important;
    font-size: 13px !important;
  }
}

::v-deep .el-checkbox__label {
  color: #ff6a00 !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #ff6a00 !important;
  border: 1px solid #ff6a00;
}

.other-user-div {
  display: flex;
  flex-direction: row;

  .other-user-name {
    width: 134px;
    overflow: hidden;
  }

}


.postsearch-view {
  display: flex;
  flex-direction: row;

  .search-input-key {
    width: 180px;
    margin-right: 10px;
  }

  .search-bot-item {
    width: 100px;
    height: 48px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #212121;
    line-height: 48px;
    background: #FFE566;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    margin-right: 20px;
  }
  .search-bot-clear {
    background: #E6E6E6;
    color: #666666;
  }
}
.ke_ml20 {
  margin-left: 20px;
}

::v-deep .el-loading-mask {
   background: rgba(0, 0, 0, 0.2) !important;
   .circular {
    width: 80px;
    height: 80px;
   }
}
.action-btn {
    width: 66px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #FF6A00;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #FF6A00;
  }
.tody-book-main .book-center{
  height: 700px !important;
}
.tody-book-main .el-table--fit {
  height: 650px !important;
}
.look-img-pleft {
    right: 55px !important;
   }
   .rooName-tornost {
    // margin: 0  auto 0 auto;
    padding: 0 13px;
    height: 16px;
    background: #ff6a00;
    border-radius: 0px 4px 4px 0px;
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    line-height: 36px;
    text-align: center;
    line-height: 16px;
   }
   .sublt-ts-class {
    padding-right: 30px;
   }
</style>
